Jag fick en liten designsituation där jag gjorde ett flytande rutnät med lådor. Jag ville ange hur många lådor över en rad som var mycket enkelt och få dem att spola mot behållarens båda kanter. Inte alltför svårt, som vi vet från att inte tänka över nät och använda rätt lådstorlek kan du få fyra flytande lådor i radbredd 25% bredd - enkelt.
Men tänk om du vill använda marginal mellan lådorna? Fortfarande helt möjligt, kräver bara lite fundering. Säg att du vill ha fyra i rad, du måste ta reda på hur mycket utrymme du har kvar efter att all marginal har använts. Eftersom du inte vill ha marginal på den sista i raden är det tre marginaler:
100% - (3 * MARGIN)3 är verkligen "rader du vill ha minus en", så:
100% - ((ROWS - 1) * MARGIN)Sedan delar du ut det utrymme du har kvar med hur många rutor du vill ha på det som, så:
(100% - ((ROWS - 1) * MARGIN)) / ROWSDu kan använda Sass för det:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Ännu bättre, vi gör det till ett @mixin, så vi kan bara ringa det när vi behöver 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; ) )Titta på videon för att lära dig mer om den där knepiga biten med: nth-child
I videon, biten i början med Jade-slingan kan du lära dig mer om här.
Och här är pennan:
Se Pen Simple Technique för användning av Sass for Rows av Chris Coyier (@chriscoyier) på CodePen.
