Automatiser nth-child Selectors med Family.scss Mixins
Sass er den bedste måde at styre moderne CSS og mixin biblioteker kan spare endnu mere tid under udviklingscyklussen.
Disse mixins fungerer som automatiserede koder eller funktioner at du ringer i dine vigtigste Sass-filer. Nogle mixiner er mere generelle, mens andre er meget specifikke som f.eks Family.scss bibliotek.
Dette gratis bibliotek tilbyder 26 mixins til løb kompleks : N'te-barn selektorer uden at huske al den kode.
De fleste udviklere ved om : N'te-barn vælger og som standard er det bestemt ikke kompliceret. Du simpelthen send en numerisk vælger, for eksempel : N'te-barn (2) hvor de tilhørende stilregler gælder for hvert andet barn af moderelementet.
Dette kan dog blive langt mere komplekst, når du vil vælge dynamiske elementer (som først og sidst) eller når du vil vælge en lille håndfuld elementer (som de første tre børn).
Det er her, hvor Family.scss kan hjælpe. Det er et meget lille bibliotek og indeholder 26 løsninger til børneselectors lige fra grund til super kompleks. Hver mixin har en demo på hjemmesiden, som du kan gennemse og filtrere efter behov.
Her er nogle interessante eksempler for at vise hvad dette bibliotek kan gøre:
efter-første (5)- vælg alle elementer efter de første 5 børnfra-ende (3)- vælg det 3. til det sidste barnelementall-men (3)- vælg alle børn undtagen den 3.lige mellem (3, 12)- vælg alle lige børn mellem 3. og 12. element
Der er snesevis mere, du kan gennemse, og de har demo for at hjælpe dig med at visualisere, hvordan de virker.
Et par avancerede mixins stole på kvantitetsforespørgsler som vælger elementer som er “i det mindste” eller “højst” fastgjort til et bestemt område. For eksempel kan du vælge alle børn til forældreelementer, der har mindst 5 børn (eller flere).
Disse ideer kan være forvirrende, når de læser om dem, men de levende demoer gør det hele helt klart.
At grave i, kan du download en kopi af denne mixin bibliotek fra GitHub repo, sammen med alle disse demoer. Og du kan dele dine tanker eller spørgsmål med projektets skaber på Twitter @LukyVJ.
