Ich hatte eine kleine Design-Situation, in der ich ein flüssiges Gitter aus Kisten mit Schwimmern herstellte. Ich wollte angeben, wie viele Kisten in einer Reihe sehr einfach sind, und sie bündig mit beiden Kanten des Containers abschließen. Nicht allzu schwierig, da wir wissen, dass wir vier schwimmende Boxen in einer Reihenbreite von 25% erhalten können, da wir die Gitter nicht überdenken und die richtige Boxgröße verwenden.
Aber was ist, wenn Sie den Abstand zwischen den Feldern verwenden möchten? Immer noch völlig möglich, erfordert nur ein wenig Nachdenken. Angenommen, Sie möchten vier in einer Reihe, müssen Sie herausfinden, wie viel Platz Sie noch haben, nachdem der gesamte Rand verwendet wurde. Da Sie keinen Rand für den letzten in der Reihe haben möchten, sind das 3 Ränder:
100% - (3 * MARGIN)3 ist wirklich "Zeilen, die Sie minus eins wollen", also:
100% - ((ROWS - 1) * MARGIN)Dann teilen Sie den verbleibenden Platz durch die Anzahl der gewünschten Felder, also:
(100% - ((ROWS - 1) * MARGIN)) / ROWSSie könnten Sass dafür verwenden:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Noch besser, wir machen daraus ein @mixin, sodass wir es einfach aufrufen können, wann immer wir es brauchen:
@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; ) )Sehen Sie sich das Video an, um mehr über dieses schwierige Stück mit: n-tes Kind zu erfahren
Im Video, dem Bit am Anfang mit der Jade-Schleife, können Sie hier mehr erfahren.
Und hier ist der Stift:
Weitere Informationen zur Verwendung von Sass for Rows von Chris Coyier (@chriscoyier) auf CodePen finden Sie in der einfachen Stifttechnik.