Имао сам малу дизајнерску ситуацију када сам правио флуидну мрежу кутија са пловцима. Желео сам да прецизирам колико је оквира у реду било врло лако и да их испрам уз обе ивице контејнера. Није превише тешко, као што знамо из непромишљених мрежа и коришћења одговарајуће величине кутије, можете добити четири плутајуће кутије у ширини реда 25% ширине - лако.
Али шта ако желите да користите маргину између поља? И даље потпуно могуће, само треба мало размислити. Рецимо да желите четири заредом, мораћете да схватите колико вам је простора остало након што се искористи сва маргина. Будући да не желите маргину на последњој у низу, то су 3 маргине:
100% - (3 * MARGIN)3 су заиста „редови које желите минус један“, па:
100% - ((ROWS - 1) * MARGIN)Затим преостали простор поделите са колико кутија желите на томе, па:
(100% - ((ROWS - 1) * MARGIN)) / ROWSЗа то бисте могли да користите Сасс:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Још боље, од тога правимо @микин, тако да га можемо назвати кад год нам затреба:
@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; ) )Погледајте видео да бисте сазнали више о том шкакљивом комаду са: нтх-цхилд
У видеу, бит на почетку са петљом Јаде, о чему можете сазнати више овде.
А ево и оловке:
Погледајте Пен Симпле Тецхникуе за коришћење Сасс фор Ровс Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.