Mal som malú konštrukčnú situáciu, keď som robil tekutú mriežku z krabíc s plavákmi. Chcel som veľmi ľahko určiť, koľko políčok v rade bolo, a nechať ich zapadnúť k obom okrajom nádoby. Nie je to príliš ťažké, ako vieme z nepreváženia mriežok a správneho dimenzovania škatúľ, takže môžete získať štyri plávajúce škatule v šírke radu 25% - ľahké.
Čo však v prípade, ak chcete použiť okraj medzi políčkami? Stále je to úplne možné, vyžaduje si to len trochu premýšľania. Povedzme, že chcete štyri za sebou, budete musieť zistiť, koľko miesta vám zostane po vyčerpaní celej rezervy. Pretože nechcete, aby bol okraj posledný v rade, sú to 3 okraje:
100% - (3 * MARGIN)3 je skutočne „riadky, ktoré chcete, mínus jeden“, takže:
100% - ((ROWS - 1) * MARGIN)Potom vydelíte miesto, ktoré vám zostalo, počtom políčok, ktoré chcete mať, takže:
(100% - ((ROWS - 1) * MARGIN)) / ROWSMôžete na to použiť Sass:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Ešte lepšie je, keď z toho urobíme @mixín, takže ho môžeme kedykoľvek zavolať, kedykoľvek to potrebujeme:
@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; ) )Pozrite si video a dozviete sa o tomto zložitom probléme s: n-tým dieťaťom
Vo videu, trochu na začiatku s Jade slučkou, sa môžete dozvedieť viac tu.
A tu je pero:
Prečítajte si jednoduchú techniku používania pera Sass for Rows od Chrisa Coyiera (@chriscoyier) na stránke CodePen.