Family.scss Mixins ile Çocuk Seçicileri Otomatikleştirin
şımarıklık Modern CSS’i yönetmenin en iyi yolu karma kütüphaneler Geliştirme döngüsü sırasında daha da fazla zaman kazandırabilir.
Bu karışımlar gibi çalışır otomatik kodlar veya işlevler Ana Sass dosyalarında aradığınızı Bazı karışımlar daha genel, bazıları ise çok belirgindir. Family.scss kütüphanesi.
Bu ücretsiz kütüphane sunar 26 karışım koşu için karmaşık : N'inci-çocuk seçiciler tüm bu kodları ezberlemeden.
Çoğu geliştirici hakkında bilmek : N'inci-çocuk seçici ve varsayılan olarak, kesinlikle karmaşık değil. Sen sadece sayısal seçiciyi geçmek, Örneğin : İnci-çocuk (2) ait olduğu stil kurallarının ana öğenin her ikinci çocuğuna uygulandığı yer.
Ancak, seçim yapmak istediğinizde bu çok daha karmaşık bir hal alabilir. dinamik elemanlar (ilk ve son gibi) veya ne zaman seçmek istediğinizi elementlerin küçük avuç (ilk üç çocuk gibi).
Family.scss'in yardım edebileceği yer burasıdır. Çok küçük bir kütüphane ve çocuk seçiciler için 26 çözüm içeriyor temelden süper karmaşaya kadar değişen. Her bir karışımın ana sayfasında, gerektiği gibi göz atabileceğiniz ve filtreleyebileceğiniz bir demo vardır.
İşte bazı ilginç örnekler bu kütüphanenin neler yapabileceğini göstermek için:
sonrası ilk (5)- ilk 5 çocuktan sonra tüm elemanları seçdan uç (3)- sondan üçüncü çocuğa eleman seçher ama (3)- 3. hariç tüm çocukları seçeşit (3, 12)- 3. ve 12. elementler arasındaki bütün çocukları bile seçin
Gezinebileceğiniz daha fazla düzinelerce var ve her birinin nasıl çalıştığını görmenize yardımcı olacak demoları var..
Birkaç gelişmiş karışım miktar sorgularına güvenmek Bu olan elementleri “en azından” veya “en fazla” belirli bir aralığa sabitlenmiş. Örneğin, tüm çocukları en az 5 çocuğu (veya daha fazlası) olan ana öğeler için seçebilirsiniz..
Bu fikirler onlar hakkında okurken kafa karıştırıcı olabilir canlı demolar Gerçekten hepsini netleştirin.
Kazmak için, bir kopyasını indir GitHub deposundaki bu mixin kütüphanesinin tüm bu gösterilerle birlikte. Ayrıca, düşüncelerinizi veya sorularınızı projenin yaratıcısıyla Twitter'da @LukyVJ'de paylaşabilirsiniz..
