Prišel sem do majhne zasnove, ko sem izdeloval tekočo mrežo škatel s plovci. Želel sem natančno določiti, koliko škatel v vrsti je bilo zelo enostavno, in naj se poravnajo na oba roba posode. Ni prezahtevno, saj vemo, da iz pretiranega razmišljanja mrež in pravilne velikosti škatel lahko dobite štiri plavajoče škatle v širini vrstice 25% širine - enostavno.
Kaj pa, če želite uporabiti rob med polji? Še vedno povsem mogoče, le nekaj razmisleka zahteva. Recimo, da želite štiri zapored, morali boste ugotoviti, koliko prostora vam ostane po porabi vse meje. Ker ne želite marže na zadnji v vrsti, so to 3 robi:
100% - (3 * MARGIN)3 so v resnici "vrstice, ki jih želite minus ena", zato:
100% - ((ROWS - 1) * MARGIN)Nato prostor, ki vam ostane, delite s številom polj, ki jih želite na tem mestu, tako da:
(100% - ((ROWS - 1) * MARGIN)) / ROWSZa to lahko uporabite Sass:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Še bolje, iz tega naredimo @mixin, zato ga lahko pokličemo, kadar koli ga potrebujemo:
@mixin rowMachine($numPerRow, $margin) ( width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); &:nth-child(n) ( margin-bottom: $margin; margin-right: $margin; ) &:nth-child(#($numPerRow)n) ( margin-right: 0; margin-bottom: 0; ) )Oglejte si video, če želite izvedeti več o tej zapleteni bitki z: nth-child
V videu, bit na začetku z zanko Jade, lahko več o tem izveste tukaj.
In tukaj je Pen:
Oglejte si Pen Simple Technique za uporabo Sass for Rows avtorja Chris Coyier (@chriscoyier) na CodePen.