Miałem małą sytuację projektową, w której robiłem płynną siatkę pudełek z pływakami. Chciałem bardzo łatwo określić, ile pudełek w rzędzie było bardzo łatwo, i ustawić je równo z obiema krawędziami pojemnika. Nie jest to zbyt trudne, jak wiemy, nie przemyślając kratek i używając odpowiedniego rozmiaru pudełka, można uzyskać cztery pływające pudełka w rzędzie o szerokości 25% - łatwo.
Ale co, jeśli chcesz użyć marginesu między polami? Wciąż jest to całkowicie możliwe, wymaga tylko trochę przemyśleń. Powiedzmy, że chcesz cztery z rzędu, musisz dowiedzieć się, ile miejsca pozostało po wykorzystaniu całego marginesu. Ponieważ nie chcesz marginesu na ostatnim w rzędzie, to 3 marginesy:
100% - (3 * MARGIN)3 to naprawdę „żądane wiersze minus jeden”, więc:
100% - ((ROWS - 1) * MARGIN)Następnie dzielisz pozostawioną przestrzeń przez liczbę pól, które chcesz na tym, więc:
(100% - ((ROWS - 1) * MARGIN)) / ROWSMożesz do tego użyć Sassa:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Jeszcze lepiej, robimy to w @mixin, więc możemy po prostu nazwać to, kiedy tego potrzebujemy:
@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; ) )Obejrzyj wideo, aby dowiedzieć się o tym trudnym fragmencie z: nth-child
W filmie, kawałek na początku z pętlą Jade, możesz dowiedzieć się więcej tutaj.
A oto pióro:
Zobacz Prostą technikę pióra dotyczącą używania Sass dla wierszy autorstwa Chrisa Coyiera (@chriscoyier) w CodePen.