Automasi pemilih nth-child dengan Mixins Family.scss
Sass adalah cara terbaik untuk menguruskan CSS moden dan perpustakaan campuran boleh menjimatkan lebih banyak masa semasa kitaran pembangunan.
Ini campuran berfungsi seperti kod atau fungsi automatik yang anda panggil dalam fail utama Sass anda. Beberapa campuran lebih umum manakala yang lain adalah sangat spesifik seperti Perpustakaan keluarga.scss.
Tawaran perpustakaan percuma ini 26 mixin untuk berlari kompleks : nth-child pemilih tanpa menghafal semua kod itu.
Kebanyakan pemaju tahu tentang : nth-child pemilih dan secara lalai, tentu tidak rumit. Anda semata-mata lulus pemilih angka, sebagai contoh : nth-child (2) di mana peraturan gaya kepunyaan berlaku untuk setiap anak kedua unsur induk.
Walau bagaimanapun, ini boleh menjadi jauh lebih kompleks apabila anda mahu memilih unsur dinamik (seperti yang pertama & terakhir) atau apabila anda mahu memilih kecil segelintir elemen (seperti tiga anak pertama).
Di sinilah Family.scss dapat membantu. Ia adalah perpustakaan yang sangat kecil dan ia mengandungi 26 penyelesaian untuk pemilih kanak-kanak dari asas ke super kompleks. Setiap mixin mempunyai demo di laman utama, yang boleh anda semak imbas dan menyaring seperti yang diperlukan.
Berikut adalah beberapa contoh menarik untuk menunjukkan apa yang boleh dilakukan oleh perpustakaan ini:
selepas pertama (5)- pilih semua unsur selepas 5 anak pertamadari-akhir (3)- pilih ketiga ke elemen anak yang terakhirsemua-tetapi (3)- pilih semua kanak-kanak kecuali ke-3walaupun-antara (3, 12)- pilih semua kanak-kanak di antara unsur ke-3 dan ke-12
Terdapat lebih banyak lagi yang boleh anda layari dan setiap mereka mempunyai demo untuk membantu anda memvisualisasikan bagaimana ia berfungsi.
Beberapa campuran lanjutan bergantung pada pertanyaan kuantiti yang memilih elemen yang ada “sekurang-kurangnya” atau “kebanyakannya” ditetapkan pada julat tertentu. Sebagai contoh, anda boleh memilih semua kanak-kanak untuk elemen induk yang mempunyai sekurang-kurangnya 5 anak (atau lebih).
Idea ini boleh mengelirukan apabila membaca tentang mereka tetapi demo langsung benar-benar menjadikannya semua jernih.
Untuk menggali, anda boleh muat turun salinan perpustakaan mixin ini dari repo GitHub, bersama dengan semua demo ini. Dan, anda boleh berkongsi pemikiran atau soalan anda dengan pencipta projek di Twitter @LyyVJ.
