Comment spécifier des gouttières de 2,5% pour une grille de 12 colonnes Susy

Question

J'ai un premier site mobile avec deux réglages de grille différents. Jusqu'à 600px:

$sm-screen-grid: (
    columns: 5, 
    gutters: 1/3 
); 

Ces gouttières montrent que 2,5% rembourrage, en essayant toujours de comprendre comment est calculé exactement qu'être. Après 600 je passe à une grille de 12 colonnes. Mon problème est que je veux que la largeur de la gouttière soit toujours de 2,5%. Je ne peux pas sembler comprendre quelles sont les valeurs de spécifier pour les gouttières il rend aussi:

padding-left: 2.5%; 
padding-right: 2.5%; 

forums d'un conteneur.

Un conseil?

Answer 1

Le calcul de Susy change en fonction de la position de la gouttière. Sur la base de cette sortie, je suppose que vous utilisez le paramètre inside. Ce mathématiques ressemble à:

// target-width/context-width * 100% 
$single-gutter: $gutters/($columns + ($gutters * $columns)) * 100%; 

Dans votre cas, le résultat de cette équation est 5%, qui est divisé entre le rembourrage gauche et à droite - 2.5% chacun. Pour autant que je sache, une grille de 12 colonnes aurait besoin de gouttières réglées sur 1.5 afin d'obtenir le même résultat. Cela signifie, pour garder un 2.5% exact, vos gouttières seront plus grandes que vos colonnes. Rappelez-vous que le pourcentage de remplissage est calculé en référence à l'élément contenant, et non à l'élément à rembourrer. Alors gardez le % le même ne gardera pas le même ratio colonne-gouttière. Si vous essayez d'avoir toujours des gouttières 2.5% de la colonne, vous devez changer le réglage de la gouttière à .25 et laissez-le là. Le pourcentage de sortie changera, mais le ratio colonne-gouttière restera le même avec n'importe quel nombre de colonnes.