Jeg hadde en liten designsituasjon der jeg lagde et flytende rutenett av bokser med flottører. Jeg ønsket å spesifisere hvor mange bokser over en rad som var veldig lett, og få dem til å skyve mot begge kantene av containeren. Ikke så vanskelig, som vi vet fra ikke å tenke over rutenett og bruke riktig boksstørrelse, kan du få fire flytende bokser i en radbredde på 25% bredde - enkelt.
Men hva om du vil bruke margin mellom boksene? Fortsatt helt mulig, krever bare litt tenkning. Si at du vil ha fire på rad, må du finne ut hvor mye plass du har igjen etter at all margen er brukt. Fordi du ikke vil ha margin på den siste på raden, er det tre marginer:
100% - (3 * MARGIN)3 er egentlig "rader du vil ha minus en", så:
100% - ((ROWS - 1) * MARGIN)Deretter deler du plassen du har igjen med hvor mange bokser du vil ha som, så:
(100% - ((ROWS - 1) * MARGIN)) / ROWSDu kan bruke Sass til det:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Enda bedre, vi gjør det til en @mixin, så vi kan bare kalle det når vi trenger 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 å lære om den vanskelige biten med: nth-child
I videoen, biten i begynnelsen med Jade-løkken, kan du lære mer om her.
Og her er pennen:
Se pennens enkle teknikk for bruk av Sass for Rows av Chris Coyier (@chriscoyier) på CodePen.