Ik had een kleine ontwerpsituatie waarbij ik een vloeiend raster van dozen met drijvers aan het maken was. Ik wilde heel gemakkelijk aangeven hoeveel dozen in een rij waren, en ze tegen beide randen van de container laten aansluiten. Niet zo moeilijk, zoals we weten door niet te veel nadenken over roosters en door de juiste doosmaat te gebruiken, kun je vier zwevende dozen krijgen op een rij met een breedte van 25% - eenvoudig.
Maar wat als u marge tussen de dozen wilt gebruiken? Nog steeds volledig mogelijk, vereist alleen wat nadenken. Stel dat u er vier op een rij wilt, dan moet u uitzoeken hoeveel ruimte u nog over heeft nadat alle marge is gebruikt. Omdat u geen marge wilt op de laatste van de rij, zijn dat 3 marges:
100% - (3 * MARGIN)3 is eigenlijk "rijen die u wilt min één", dus:
100% - ((ROWS - 1) * MARGIN)Vervolgens deel je de ruimte die je over hebt door hoeveel dozen je daar op wilt, dus:
(100% - ((ROWS - 1) * MARGIN)) / ROWSJe zou Sass daarvoor kunnen gebruiken:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Sterker nog, we maken er een @mixin van, dus we kunnen het gewoon noemen wanneer we het nodig hebben:
@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; ) )Bekijk de video om meer te weten te komen over dat lastige deel met: n-kind
In de video, het bit in het begin met de Jade-lus, kun je hier meer lezen.
En hier is de pen:
Zie de Pen Simple Technique voor het gebruik van Sass for Rows door Chris Coyier (@chriscoyier) op CodePen.