Volt egy kis tervezési helyzetem, amikor egy úszókkal ellátott dobozok folyadékrácsát készítettem. Meg akartam adni, hogy egy dobozban hány doboz legyen nagyon könnyű, és hogy a tartály mindkét széléhez simuljanak. Nem túl nehéz, mint tudjuk a rácsok nem túlgondolásából és a megfelelő dobozméretezésből, négy lebegő dobozt kaphatunk egymás után 25% szélességben - könnyű.
De mi van, ha margót szeretne használni a dobozok között? Még mindig teljesen lehetséges, csak némi gondolkodást igényel. Mondja, hogy négyet szeretne egymás után, meg kell találnia, hogy mennyi hely maradt még az összes margó felhasználása után. Mivel nem akar margót a sor utolsó részén, ez 3 margó:
100% - (3 * MARGIN)A 3 valóban „a kívánt sorok mínusz egy”, tehát:
100% - ((ROWS - 1) * MARGIN)Ezután elosztja a megmaradt helyet azzal, hogy hány dobozt szeretne az ilyenre, így:
(100% - ((ROWS - 1) * MARGIN)) / ROWSHasználhatja a Sass-t erre:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Még jobb, ha @mixinné tesszük, így hívhatjuk, amikor csak szükségünk van rá:
@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; ) )Nézze meg a videót, hogy megismerje ezt a trükkös darabot: n-gyermekkel
A videóban az elején található Jade hurokkal rendelkező bit itt többet megtudhat.
És itt van a Toll:
Lásd a Toll egyszerű technikáját a Sass for Rows használatához Chris Coyier (@chriscoyier) a CodePen-en.