Mul tekkis väike disainisituatsioon, kus valmistasin vedelikuvõrku ujukitega kastidest. Tahtsin täpsustada, mitu kasti reas oli väga lihtne, ja lasta neil konteineri mõlema serva vastu loputada. Pole liiga keeruline, kuna me teame võrkude mitte üle mõtlemisest ja õige kastide suuruse kasutamisest, võite saada neli hõljuvat kasti 25% laiuse rea laiusena - lihtne.
Aga mis siis, kui soovite kastide vahel kasutada varu? Ikka täiesti võimalik, nõuab vaid veidi mõtlemist. Oletame, et soovite neli järjest, peate pärast kogu varu kasutamist välja mõtlema, kui palju ruumi teil on jäänud. Kuna te ei soovi varu viimasele reale, on see 3 veerist:
100% - (3 * MARGIN)3 on tõesti "read, mida soovite miinus üks", nii et:
100% - ((ROWS - 1) * MARGIN)Seejärel jagate järelejäänud ruumi mitu kasti, mida soovite, nii et:
(100% - ((ROWS - 1) * MARGIN)) / ROWSSelleks võiksite kasutada Sassi:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Veelgi parem, me teeme sellest @mixini, nii et võime seda lihtsalt helistada, kui seda vajame:
@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; ) )Vaadake videot, et saada teada selle nipiga: n-laps
Videost, Jade loopi alguses olevast natuke, saate siin rohkem teada saada.
Ja siin on Pliiats:
Vaadake Chris Coyieri (@chriscoyier) CodePeni saidil Pliiatsi lihtsat tehnikat Sassi kasutamiseks ridadele.