Saya mempunyai sedikit keadaan reka bentuk ketika saya membuat kotak kotak dengan apungan. Saya ingin menyatakan berapa banyak kotak yang berturut-turut dengan mudah, dan menyuruhnya melepasi kedua tepi bekas. Tidak terlalu sukar, seperti yang kita ketahui dari tidak terlalu banyak grid dan menggunakan ukuran kotak yang betul, anda boleh mendapatkan empat kotak terapung dalam barisan lebar 25% lebar - mudah.
Tetapi bagaimana jika anda mahu menggunakan margin antara kotak? Masih boleh dilakukan, hanya memerlukan pemikiran. Katakan anda mahu empat berturut-turut, anda perlu mengetahui berapa banyak ruang yang tersisa setelah semua margin digunakan. Kerana anda tidak mahu margin pada yang terakhir berturut-turut, itu adalah 3 margin:
100% - (3 * MARGIN)3 benar-benar "baris yang anda mahu tolak satu", jadi:
100% - ((ROWS - 1) * MARGIN)Kemudian anda membahagikan ruang yang anda tinggalkan dengan berapa banyak kotak yang anda mahukan seperti itu, jadi:
(100% - ((ROWS - 1) * MARGIN)) / ROWSAnda boleh menggunakan Sass untuk itu:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Lebih baik lagi, kita menjadikannya sebagai @mixin, jadi kita boleh memanggilnya setiap kali kita memerlukannya:
@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 mengetahui mengenai perkara yang sukar dengan: nth-child
Dalam video, sedikit pada permulaan dengan gelung Jade anda boleh mengetahui lebih lanjut mengenai di sini.
Dan inilah Pen:
Lihat Teknik Pen Mudah untuk menggunakan Sass for Rows oleh Chris Coyier (@chriscoyier) di CodePen.