Automatizați selectorii n-copil cu Mix-uri Family.scss
Sass este cel mai bun mod de a gestiona CSS moderne și mixin biblioteci poate economisi și mai mult timp în timpul ciclului de dezvoltare.
Aceste mixuri funcționează cum ar fi coduri sau funcții automate pe care le apelați în principalele fișiere Sass. Unele amestecuri sunt mai generale, în timp ce altele sunt foarte specifice, cum ar fi Family.scss bibliotecă.
Această bibliotecă gratuită oferă 26 mixins pentru funcționare complex : Nth-copil selectoare fără a memora tot codul.
Majoritatea dezvoltatorilor știu despre : Nth-copil selector și, în mod implicit, cu siguranță nu este complicat. Pur și simplu treceți un selector numeric, de exemplu : Nth-copil (2) unde regulile stilului de apartenență se aplică fiecărui al doilea copil al elementului părinte.
Cu toate acestea, acest lucru poate deveni mult mai complex când doriți să selectați elemente dinamice (cum ar fi prima și ultima) sau când doriți să selectați o mână mică de elemente (cum ar fi primii trei copii).
Aici familia poate ajuta. Este o bibliotecă foarte mică și conține 26 de soluții pentru selectori pentru copii variind de la bază la super-complex. Fiecare mixin are un demo pe pagina principală, pe care o puteți naviga și filtra după cum este necesar.
Aici sunt câteva exemple interesante pentru a arăta ce poate face această bibliotecă:
după primul (5)- selectați toate elementele după primii 5 copiila-end (3)- selectați elementul 3 până la ultimul copilall dar (3)- selectați toți copiii cu excepția celui de-al treileachiar și între (3, 12)- selectați toți copiii chiar între elementele 3 și 12
Există zeci de mai multe pe care le puteți naviga prin fiecare și au demo-uri pentru a vă ajuta să vizualizați modul în care acestea funcționează.
Câteva mixuri avansate se bazează pe interogări cantitative care aleg elemente care sunt “macar” sau “cel mult” fixat la un anumit interval. De exemplu, puteți selecta toți copiii pentru elementele părinte care au cel puțin 5 copii (sau mai mulți).
Aceste idei pot fi confuze când citiți despre ele, ci despre acestea demonstrații live într-adevăr face totul clar cristal.
Pentru a săturați, puteți descărcați o copie din această bibliotecă mixin de la repo GitHub, împreună cu toate aceste demo-uri. Și, puteți împărtăși gândurile sau întrebările dvs. cu creatorul proiectului pe Twitter @LukyVJ.
