Otomatis Selektor n-anak dengan Mixins Family.scss
Kelancangan adalah cara terbaik untuk mengelola CSS modern dan perpustakaan mixin dapat menghemat lebih banyak waktu selama siklus pengembangan.
Mixin ini berfungsi seperti kode atau fungsi otomatis Anda memanggil file Sass utama Anda. Beberapa mixin lebih umum sementara yang lain sangat spesifik seperti Perpustakaan Family.scss.
Perpustakaan gratis ini menawarkan 26 campuran untuk berlari kompleks : nth-child penyeleksi tanpa mengingat semua kode itu.
Sebagian besar pengembang tahu tentang : nth-child pemilih dan secara default, itu tentu tidak rumit. Kamu hanya lulus pemilih numerik, sebagai contoh : nth-child (2) di mana aturan gaya yang dimiliki berlaku untuk setiap anak kedua dari elemen induk.
Namun, ini bisa menjadi jauh lebih rumit ketika Anda ingin memilih elemen dinamis (seperti yang pertama & terakhir) atau ketika Anda ingin memilih a segelintir elemen (seperti tiga anak pertama).
Di sinilah Family.scss dapat membantu. Ini adalah perpustakaan yang sangat kecil dan berisi 26 solusi untuk penyeleksi anak mulai dari dasar hingga super kompleks. Setiap mixin memiliki demo di beranda, yang dapat Anda telusuri dan filter sesuai kebutuhan.
Ini ada beberapa contoh menarik untuk memamerkan apa yang bisa dilakukan perpustakaan ini:
after-first (5)- pilih semua elemen setelah 5 anak pertamadari-akhir (3)- pilih elemen ke-3 hingga anak terakhirall-but (3)- pilih semua anak kecuali anak ke-3even-between (3, 12)- pilih semua anak genap antara elemen 3 & 12
Ada lusinan lagi yang dapat Anda telusuri dan masing-masing memiliki demo untuk membantu Anda memvisualisasikan cara kerjanya.
Beberapa mixin canggih mengandalkan permintaan kuantitas yang memilih elemen mana “setidaknya” atau “paling banyak” diperbaiki ke rentang tertentu. Misalnya, Anda dapat memilih semua anak untuk elemen induk yang memiliki setidaknya 5 anak (atau lebih).
Gagasan ini dapat membingungkan ketika membaca tentang mereka tetapi demo langsung benar-benar membuatnya jelas.
Untuk menggali, Anda bisa unduh salinan perpustakaan mixin ini dari repo GitHub, bersama dengan semua demo ini. Dan, Anda dapat membagikan pemikiran atau pertanyaan Anda dengan pembuat proyek di Twitter @LukyVJ.
