Měl jsem přijít s malou konstrukční situací, kdy jsem vyráběl tekutou mřížku krabic s plováky. Chtěl jsem velmi snadno určit, kolik polí v řadě bylo, a nechat je zarovnat k oběma hranám kontejneru. Není to příliš obtížné, jak víme z nepřemýšlení mřížek a správného dimenzování krabic, můžete získat čtyři plovoucí krabice v šířce řádku 25% - snadné.
Ale co když chcete použít okraj mezi poli? Stále je to naprosto možné, vyžaduje to jen trochu přemýšlení. Řekněme, že chcete čtyři v řadě, budete muset zjistit, kolik místa vám zbylo po využití všech okrajů. Protože nechcete okraj na posledním v řádku, jsou to 3 okraje:
100% - (3 * MARGIN)3 je opravdu „řádky, které chcete minus jeden“, takže:
100% - ((ROWS - 1) * MARGIN)Poté vydělíte zbývající prostor počtem polí, která chcete mít, takže:
(100% - ((ROWS - 1) * MARGIN)) / ROWSK tomu můžete použít Sass:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Ještě lépe z toho uděláme @mixin, takže jej můžeme jednoduše zavolat, kdykoli to potřebujeme:
@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; ) )Podívejte se na video a dozvíte se o tom složitém kousku s: n-dítětem
Ve videu, bit na začátku s Jade smyčkou se můžete dozvědět více o zde.
A tady je pero:
Podívejte se na jednoduchou techniku pera, jak používat Sass for Rows od Chris Coyier (@chriscoyier) na CodePen.