Automatiser nth-barn Selectors med Family.scss Mixins
sass er den beste måten å administrere moderne CSS og mixin biblioteker kan spare enda mer tid i løpet av utviklingssyklusen.
Disse mixins fungerer som automatiserte koder eller funksjoner som du ringer i dine viktigste Sass-filer. Noen mixiner er mer generelle mens andre er veldig spesifikke som Family.scss bibliotek.
Dette gratis biblioteket tilbyr 26 mixins for kjøring komplekse : N-te-barn velgere uten å huske all den koden.
De fleste utviklere vet om : N-te-barn selector og som standard er det absolutt ikke komplisert. Du rett og slett pass en numerisk velg, for eksempel : N-te-barn (2) der tilhørende stilregler gjelder for hvert sekund barn av foreldreelementet.
Dette kan imidlertid bli langt mer komplekst når du vil velge dynamiske elementer (for eksempel først og sist) eller når du vil velge en liten håndfull elementer (som de tre første barna).
Det er her Family.scss kan hjelpe. Det er et veldig lite bibliotek og inneholder 26 løsninger for barnselektorer alt fra grunnleggende til superkompleks. Hver mixin har en demo på hjemmesiden, som du kan bla gjennom og filtrere etter behov.
Her er det noe interessante eksempler å vise hva dette biblioteket kan gjøre:
etter første (5)- velg alle elementene etter de første 5 barnafra-ende (3)- velg det tredje til det siste barnelementetall-men (3)- velg alle barn unntatt den tredjelike mellom (3, 12)- velg alle selv barn mellom 3. og 12. element
Det er dusinvis mer du kan bla gjennom, og de har demoer for å hjelpe deg med å visualisere hvordan de fungerer.
Noen få avanserte mixins stole på antall spørringer som velger elementer som er “i det minste” eller “på det meste” festet til et bestemt område. For eksempel kan du velge alle barn for foreldreelementer som har minst 5 barn (eller mer).
Disse ideene kan være forvirrende når du leser om dem, men live demoer Gjør det helt klart krystallklart.
Å grave inn, kan du last ned en kopi av dette mixinbiblioteket fra GitHub repo, sammen med alle disse demoene. Og du kan dele dine tanker eller spørsmål med prosjektets skaperen på Twitter @LukyVJ.
