Minulla oli pieni suunnittelutilanne, jossa tein nesteverkkoa laatikoista, joissa oli kellukkeita. Halusin määrittää, kuinka monta laatikkoa rivillä oli erittäin helppo, ja saada ne huuhtomaan astian molempia reunoja vasten. Ei liian vaikeaa, koska tiedämme, että ruudukot eivät ole liian suuria, ja käyttämällä laatikoiden oikeaa kokoa, voit saada neljä kellunutta laatikkoa rivin leveydellä 25% - helppo.
Mutta entä jos haluat käyttää marginaalia ruutujen välissä? Silti täysin mahdollista, vaatii vain jonkin verran ajattelua. Sano, että haluat neljä peräkkäin, sinun on selvitettävä, kuinka paljon tilaa sinulla on jäljellä, kun koko marginaali on käytetty. Koska et halua marginaalia rivin viimeiselle, se on 3 marginaalia:
100% - (3 * MARGIN)3 on todella "haluamasi rivit miinus yksi", joten:
100% - ((ROWS - 1) * MARGIN)Sitten jaat jäljellä olevan tilan monilla haluamillasi laatikoilla, joten:
(100% - ((ROWS - 1) * MARGIN)) / ROWSVoit käyttää Sassia siihen:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Vielä parempi, teemme siitä @mixin, joten voimme vain soittaa sille milloin tarvitsemme sitä:
@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; ) )Katso video saadaksesi tietää siitä hankalasta bitistä: n-lapsen kanssa
Jade-silmukan alussa olevasta videosta voit oppia lisää täältä.
Ja tässä on kynä:
Katso Chris Coyierin (@chriscoyier) kynän yksinkertainen tekniikka käyttää Sass for Rowsia CodePenissä.