Rembourrage approprié pour les éléments imbriqués avec Susy 2
-
02-01-2020 - |
Question
J'essaie de créer une mise en page simple imbriquée avec Susy 2 :Un conteneur avec deux colonnes (enfants), chaque colonne enfant contenant une copie et deux colonnes imbriquées (petits-enfants).
Je remarque que les colonnes des petits-enfants ont leurs propres gouttières et que leur contenu ne correspond donc pas à celui de leurs parents.
Idéalement, les petits-enfants (et leurs couleurs d’arrière-plan) s’étendraient sur toute la largeur de l’élément enfant.
Quelle est la meilleure approche pour y parvenir ?
essentiel: https://gist.github.com/andreimoment/2a734aa4a0e99b2866e9
HTML :
<div class="parent">
<div class="child">
<p>child 1</p>
<div class="grandchild">Grandchild 1</div>
<div class="grandchild last">Grandchild 2</div>
</div>
<div class="child last">child 2</div>
</div>
SCSS :
@import "compass";
@import "susy";
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
$susy: (
columns: 12,
column-width: 4em,
gutters: 1/4,
math: fluid,
output: float,
gutter-position:inside,
global-box-sizing: border-box,
debug: (
image: show,
color: rgba(200,100,100,.3),
output: overlay,
toggle: top right,
),
);
.parent {
@include container();
@include show-grid(background);
padding:0;
@include clearfix;
}
.child {
background-color: rgba(100,100,200, 0.5);
@include span(first 6 of 12);
&.last {
@include span(last 6 of 12);
}
}
.grandchild {
background-color: rgba(100,100,200, 0.5);
@include span(first 3 of 6);
&.last {
@include span(last 3 of 6);
}
}
La solution
Utilisez le nest
mot-clé pour indiquer à Susy qu'un span a des enfants.Ceci n'est nécessaire qu'avec inside
et split
gouttières — que vous utilisez.
@include span(first 6 of 12 nest);
Vous pouvez aussi utiliser no-gutters
chaque fois que vous voulez que Susy ne sorte pas de gouttières - mais nest
est le plus clair sémantiquement dans ce cas.
NOTE:vous n'avez pas non plus besoin d'utiliser first
avec inside
ou split
gouttières.Tu ne le fais pas besoin last
non plus, mais cela peut aider à résoudre certains problèmes d'arrondi des sous-pixels.Ceux-ci ne font pas de mal, mais vous pouvez les laisser tomber sans causer de dégâts.