Automatisera nth-child Selectors med Family.scss Mixins
sass är det bästa sättet att hantera moderna CSS och mixin-bibliotek kan spara ännu mer tid under utvecklingscykeln.
Dessa mixins fungerar som automatiserade koder eller funktioner som du ringer i dina viktigaste Sass-filer. Vissa mixins är mer generella medan andra är mycket specifika som Family.scss bibliotek.
Detta gratis bibliotek erbjuder 26 mixins för att springa komplex : N: te-barn selektorer utan att memorera all den koden.
De flesta utvecklare vet om : N: te-barn väljare och som standard är det verkligen inte komplicerat. Du helt enkelt passera en numerisk väljare, till exempel : N: te-barn (2) där de tillhörande stilreglerna gäller för varje andra barn i moderelementet.
Detta kan dock bli mycket mer komplext när du vill välja dynamiska element (som första och sista) eller när du vill välja en liten handfull element (som de tre första barnen).
Det här är där Family.scss kan hjälpa. Det är ett mycket litet bibliotek och innehåller 26 lösningar för barnväljare allt från grundläggande till superkomplex. Varje mixin har en demo på hemsidan, som du kan bläddra och filtrera efter behov.
Här är några intressanta exempel för att visa vad detta bibliotek kan göra:
efter-först (5)- välj alla element efter de första 5 barnenfrån-ände (3)- välj det tredje till sista barnelementetall-men (3)- välj alla barn utom den tredjejämn mellan (3, 12)- välj alla jämn barn mellan 3: e och 12: e elementen
Det finns dussintals mer du kan bläddra igenom och de har demo för att hjälpa dig att visualisera hur de fungerar.
Några avancerade mixins förlita sig på kvantitetsfrågor som väljer element som är “åtminstone” eller “som mest” fixat till ett visst intervall. Du kan till exempel välja alla barn för moderelement som har minst 5 barn (eller mer).
Dessa idéer kan vara förvirrande när man läser om dem men levande demo gör verkligen allt klart.
Att gräva i kan du ladda ner en kopia av detta mixinbibliotek från GitHub repo, tillsammans med alla dessa demos. Och du kan dela dina tankar eller frågor med projektets skapare på Twitter @LukyVJ.
