Am avut o mică situație de proiectare în care făceam o rețea fluidă de cutii cu plutitoare. Am vrut să specific cât de multe cutii dintr-un rând au fost foarte ușor și să le sprijini pe ambele margini ale containerului. Nu prea dificil, așa cum știm din faptul că nu grăbiți excesiv și folosind dimensiunea potrivită a cutiei, puteți obține patru cutii plutite pe o lățime de 25% lățime - ușor.
Dar dacă doriți să utilizați marja între casete? Încă complet posibil, necesită doar o gândire. Spuneți că doriți patru la rând, va trebui să vă dați seama cât spațiu vă mai rămâne după ce ați folosit toată marja. Deoarece nu doriți marjă pe ultimul rând, acestea sunt 3 marje:
100% - (3 * MARGIN)3 este într-adevăr „rânduri pe care le vrei minus unul”, deci:
100% - ((ROWS - 1) * MARGIN)Apoi împărțiți spațiul pe care l-ați rămas la câte casete doriți, așa că:
(100% - ((ROWS - 1) * MARGIN)) / ROWSPuteți folosi Sass pentru asta:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Și mai bine, transformăm acest lucru într-un @mixin, astfel încât să îl putem numi ori de câte ori avem nevoie:
@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; ) )Urmăriți videoclipul pentru a afla despre acel pic dificil cu: nth-child
În videoclip, bitul de la început cu bucla Jade, puteți afla mai multe despre aici.
Și iată stiloul:
Consultați Tehnica simplă a stiloului pentru utilizarea Sass for Rows de Chris Coyier (@chriscoyier) pe CodePen.