Automatizirajte selektore nth-child s Family.scss Mixins
Sass je najbolji način upravljanja modernim CSS-om i mixin knjižnice može uštedjeti još više vremena tijekom razvojnog ciklusa.
Ovi miksini rade kao automatizirani kodovi ili funkcije koje zovete u glavnim Sass datotekama. Neki su miksovi općenitiji, dok su drugi vrlo specifični Knjižnica Family.scss.
Ova besplatna knjižnica nudi 26 mješavina za trčanje kompleks : N-ti-dijete selektora bez memoriranja tog koda.
Većina programera zna za : N-ti-dijete izbornik i po defaultu, to sigurno nije komplicirano. Jednostavno proći numerički izbornik, na primjer : N-ti-dijete (2) gdje se pripadajuća pravila stila primjenjuju na svako drugo dijete roditeljskog elementa.
Međutim, to može biti mnogo složenije kada želite odabrati dinamički elementi (kao što je prva i posljednja) ili kada želite odabrati mala šačica elemenata (kao što su prva troje djece).
Ovdje Family.scss može pomoći. To je vrlo mala knjižnica i sadrži 26 rješenja za dječje selektore od osnovnog do super kompleksnog. Svaki mixin ima demo na početnoj stranici, koju možete pregledavati i filtrirati po potrebi.
Ovdje su neke zanimljivi primjeri pokazati što ova knjižnica može učiniti:
nakon prvog (5)- odaberite sve elemente nakon prvih 5 djeces-kraja (3)- odaberite element od 3. do posljednjeg djetetasve već (3)- odaberite sva djeca osim trećejednakih razmaka (3, 12)- odaberite sva djeca između 3. i 12. elemenata
Postoji više desetaka koje možete pregledavati i svaka od njih ima demo datoteke koje vam pomažu vizualizirati kako rade.
Nekoliko naprednih mješavina osloniti se na količinske upite koje odabiru elemente koji su “barem” ili “najviše” fiksni na određeni raspon. Na primjer, možete odabrati svu djecu za nadređene elemente koji imaju najmanje 5 djece (ili više njih).
Ove ideje mogu biti zbunjujuće kada čitate o njima, ali demonstracije uživo doista bi bilo kristalno jasno.
Da kopaju, možete preuzmite kopiju ove mixin biblioteke iz GitHub repoa, zajedno sa svim ovim demosima. Svoje misli ili pitanja možete podijeliti s kreatorom projekta na Twitteru @LukyVJ.
