Man bija neliela dizaina situācija, kad es izgatavoju šķidrumu režģi no kastēm ar pludiņiem. Es gribēju precizēt, cik daudz kastes vienā rindā bija ļoti viegli, un likt tām izplūst pret abām konteinera malām. Tas nav pārāk grūti, jo mēs zinām, ka nepārdomājot režģus un izmantojot pareizo kastes lielumu, jūs varat iegūt četras peldošas kastes pēc kārtas - 25% platumā - viegli.
Bet ko tad, ja vēlaties izmantot rezervi starp lodziņiem? Joprojām ir pilnīgi iespējams, tikai nepieciešams nedaudz domāt. Sakiet, ka vēlaties četrus pēc kārtas, jums būs jāizprot, cik daudz vietas jums ir atlicis pēc tam, kad ir izmantota visa rezerve. Tā kā jūs nevēlaties, lai rezerves būtu pēdējā rindā, tas ir 3 piemales:
100% - (3 * MARGIN)3 patiešām ir “rindas, kuras vēlaties atņemt vienu”, tātad:
100% - ((ROWS - 1) * MARGIN)Tad jūs sadalāt atstāto vietu ar to, cik daudz lodziņu vēlaties šim līdzīgam, tāpēc:
(100% - ((ROWS - 1) * MARGIN)) / ROWSJūs to varētu izmantot Sass:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Vēl labāk, mēs to padarām par @mixin, tāpēc mēs to varam vienkārši saukt, kad vien tas mums nepieciešams:
@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; ) )Noskatieties videoklipu, lai uzzinātu par šo grūto lietu ar: n-bērnu
Videoklipā, mazliet sākumā ar Jade cilpu, šeit varat uzzināt vairāk.
Un šeit ir pildspalva:
Skatiet Krāsa Koijera (@chriscoyier) vietnē CodePen izmantoto vienkāršo tehniku, kā izmantot Sass for Rows.