Imbottitura corretta per elementi nidificati con Susy 2
-
02-01-2020 - |
Domanda
Sto cercando di costruire un semplice layout nidificato con Susy 2: un contenitore con due colonne (bambini), con ciascuna colonna figlio contenente copia e due colonne nidificate (nipoti).
Sto noticoltura che le colonne dei nipoti hanno le proprie grondaie e quindi il loro contenuto non si allinea con le grondaie del loro genitore.
Idealmente, i nipoti (e i loro colori di sfondo) si estendono alla larghezza completa dell'elemento infantile.
Qual è l'approccio migliore per ottenere questo?
Gist: 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>
.
@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);
}
}
. Soluzione
Usa la parola chiave nest
per dire a Susy che una spazzatura ha figli.Questo è necessario solo con inside
e grondaie split
- che stai utilizzando.
@include span(first 6 of 12 nest);
.
È inoltre possibile utilizzare no-gutters
qualsiasi volta che si desidera Susy a non inuscitare le grondaie - ma nest
è la più semanticamente chiara in questo caso.
Nota: è inoltre necessario utilizzare first
con inside
o Gardens split
.Non Hai bisogno di last
, ma può aiutare con alcuni problemi di arrotondamento sub-pixel.Quelli non ferivano nulla, ma puoi farli cadere senza causare danni.