Jeg fik en lille designsituation, hvor jeg lavede et flydende gitter af kasser med flyder. Jeg ønskede at specificere, hvor mange kasser på en række der var meget let, og få dem til at skyde mod begge kanter af containeren. Ikke så svært, som vi ved fra ikke at overtænke net og bruge den rigtige boksstørrelse, kan du få fire flydende kasser i en rækkebredde 25% bredde - let.
Men hvad nu hvis du vil bruge margen mellem kasserne? Stadig fuldstændig mulig, kræver bare nogle tanker. Sig, at du vil have fire i træk, skal du finde ud af, hvor meget plads du har tilbage, når al margen er brugt. Fordi du ikke vil have margen på den sidste i rækken, er det 3 margener:
100% - (3 * MARGIN)3 er virkelig "rækker, du vil have minus en", så:
100% - ((ROWS - 1) * MARGIN)Derefter dividerer du det rum, du har forladt, med, hvor mange felter du vil have på det, så:
(100% - ((ROWS - 1) * MARGIN)) / ROWSDu kan bruge Sass til det:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Endnu bedre, vi gør det til et @mixin, så vi kan bare kalde det, når vi har brug for det:
@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; ) )Se videoen for at lære om den vanskelige bit med: nth-child
I videoen, bit i starten med Jade-løkken, kan du lære mere om her.
Og her er pennen:
Se pennens enkle teknik til brug af Sass for Rows af Chris Coyier (@chriscoyier) på CodePen.