Saya memiliki situasi desain kecil di mana saya membuat kotak kotak cairan dengan pelampung. Saya ingin menentukan berapa banyak kotak di satu baris dengan sangat mudah, dan membuatnya rata di kedua tepi wadah. Tidak terlalu sulit, seperti yang kita ketahui dari grid yang tidak terlalu banyak berpikir dan menggunakan ukuran kotak yang tepat, Anda bisa mendapatkan empat kotak mengambang dalam satu baris dengan lebar 25% - mudah.
Tetapi bagaimana jika Anda ingin menggunakan margin di antara kotak? Masih sangat mungkin, hanya membutuhkan pemikiran. Katakanlah Anda ingin empat baris berturut-turut, Anda harus mencari tahu berapa banyak ruang yang tersisa setelah semua margin digunakan. Karena Anda tidak ingin margin di baris terakhir, itu adalah 3 margin:
100% - (3 * MARGIN)3 sebenarnya adalah "baris yang Anda inginkan dikurangi satu", jadi:
100% - ((ROWS - 1) * MARGIN)Kemudian Anda membagi ruang yang tersisa dengan berapa banyak kotak yang Anda inginkan seperti itu, jadi:
(100% - ((ROWS - 1) * MARGIN)) / ROWSAnda bisa menggunakan Sass untuk itu:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Lebih baik lagi, kami membuatnya menjadi @mixin, jadi kami dapat memanggilnya kapan pun kami membutuhkannya:
@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; ) )Tonton video untuk mempelajari hal rumit itu dengan: nth-child
Dalam video, bagian awal dari putaran Jade dapat Anda pelajari lebih lanjut di sini.
Dan inilah Pennya:
Lihat Teknik Pena Sederhana untuk menggunakan Sass untuk Baris oleh Chris Coyier (@chriscoyier) di CodePen.