Avtomatizirajte selektorje nth-child z Family.scss Mixins

Sass je najboljši način za upravljanje sodobnih CSS in knjižnice lahko prihranite še več časa med razvojnim ciklom.

Te mešanice delujejo tako avtomatizirane kode ali funkcije ki jo kličete v svojih glavnih datotekah Sass. Nekatere mešanice so bolj splošne, medtem ko so druge zelo specifične, kot je Knjižnica Family.scss.

Ta brezplačna knjižnica ponuja 26 mešanic za tek kompleksno : n-otrok izbirnikov ne da bi si zapomnili vso to kodo.

Večina razvijalcev ve o : n-otrok izbirnik in privzeto ni zapleten. Vi preprosto prenese številski izbirnik, na primer : nth-child (2) kjer pripadajoča slogovna pravila veljajo za vsakega drugega otroka nadrejenega elementa.

Vendar pa je to lahko veliko bolj zapleteno, če želite izbrati dinamični elementi (kot je prva in zadnja) ali če želite izbrati majhna peščica elementov (kot so prvi trije otroci).

Tukaj lahko pomaga Family.scss. Je zelo majhna knjižnica in vsebuje 26 rešitev za otroške selektorje od osnovne do super kompleksne. Vsak mixin ima predstavitev na domači strani, ki jo lahko po potrebi brskate in filtrirate.

Tukaj je nekaj zanimivi primeri prikažite, kaj lahko dela ta knjižnica:

• po prvem (5) - po prvih petih otrocih izberite vse elemente
• od konca (3) - izberite element 3. do zadnjega otroka
• vse-vendar (3) - izberite vse otroke, razen 3. \ t
• enakomerno (3, 12) - med 3. in 12. elementom izberite vse celo otroke

Obstaja veliko več, ki jih lahko pregledujete in vsak ima demo, ki vam bo pomagal vizualizirati, kako delujejo.

Nekaj ​​naprednih kombinacij odvisno od količinskih poizvedb ki izberejo elemente, ki so “vsaj” ali “največ” določenemu razponu. Na primer, lahko izberete vse otroke za nadrejene elemente, ki imajo vsaj 5 otrok (ali več).

Te zamisli lahko zmedejo pri branju o njih, vendar ne predstavitve v živo res bi bilo kristalno čisto.

Če želite kopati, lahko prenesite kopijo te mešane knjižnice iz replike GitHub, skupaj z vsemi temi predstavitvami. In lahko svoje misli ali vprašanja delite z ustvarjalcem projekta na Twitterju @LukyVJ.