Când începeți prima utilizare a lui Sass, primul lucru pe care îl întâlniți este cuibăritul. Unul dintre motivele pentru care folosim preprocesoare este că acestea contribuie la reducerea cantității de cod. În special, cuibăritul vă permite să utilizați abrevieri atunci când scrieți reguli. Cu toate acestea, problema tuturor instrumentelor minunate este că sunt ușor de abuzat. Utilizarea excesivă a cuiburilor duce la stiluri complexe, incontrolabile.
Ce este cuibul
Nesting vă permite să scrieți selectori care imită structura HTML. Acest lucru face posibilă utilizarea abrevierilor la scrierea stilurilor. De exemplu:
Acesta este cel mai simplu exemplu de cuibare, elementul div conține elementul p. Rezultatul compilat:
Pentru elementul div, putem stabili propriile proprietăți:
Acest exemplu este compilat în două reguli diferite, unul pentru elementul div, celălalt pentru p.
Cum să utilizați cuiburile
Folosirea stilurilor imbricate este destul de simplă: trebuie doar să scrieți un selector (sau selectori) între ansamblurile unui alt selector.
Nesting poate avea cât de multe niveluri doriți. Aceasta înseamnă că puteți pune un element într-un alt element, care în sine este conținut în al treilea element.
Restricțiile privind nivelul de cuibărit într-adevăr nu. Dar dacă se poate face ceva, acest lucru nu înseamnă că trebuie făcut. Este o practică bună să nu păstreze mai mult de trei niveluri de cuibărit. Un număr mai mare de niveluri afectează lizibilitatea codului. Sass este proiectat să ne ajute să scriem CSS mai rapid, decât să transformăm într-o grămadă de stiluri neacceptate. De exemplu:
Cinci niveluri de cuibări arata destul de inofensive. Uitați-vă la CSS compilat pentru a înțelege mai bine problema:
Imaginați-vă că vom schimba structura paginii, de exemplu, schimbarea .content la .article. Toate stilurile imbricate trebuie să fie rescrise, deoarece toate depind de .content.
Dacă vrem să folosim stiluri pentru .text în altă parte a site-ului, nu vom putea, deoarece regulile pentru .text depind de elementele care îl înconjoară.
Referințe la selectorul părinte
În exemplul teribil de mai sus, am folosit , care trebuie înlocuită de selectorul părinte. Simbolul. a fost folosit pentru a crea pseudo-clase pentru link-uri.
În sine, este ușor de citit și pe deplin susținut. simbol De asemenea, puteți să-l utilizați pentru a crea selectori complexi prin adăugarea de terminații. De exemplu:
Proprietăți de hrănire
De asemenea, Sass vă permite să utilizați comenzi rapide pentru proprietăți. De obicei, pentru a defini proprietăți dintr-un spațiu de nume, de exemplu, de frontieră, trebuie să scriem fiecare proprietate separat. În Sass, putem specifica un spațiu de nume și proprietățile listei interioare.
Ca rezultat, spațiul de nume a fost adăugat la fiecare proprietate. Spre deosebire de selectorii imbricate pentru proprietăți imbricate, nu este necesar să le utilizați pentru a înlocui valoarea spațiului de nume.
concluzie
Acum că v-ați familiarizat cu cuibul, vă rugăm să-l utilizați în mod responsabil. Este foarte simplu, cu ajutorul cuiburilor de a transforma stilurile într-un coșmar de lizibilitate. Unde și cum să utilizați cuibărările depinde de dvs., dacă vă decideți să utilizați 8 nivele de cuibărit, vă rog. Dar fiți pregătiți pentru orele lungi de lucru, când refacționați proiectul.
Ați găsit o greșeală? Orphus: Ctrl + Enter
Articole similare
Trimiteți-le prietenilor: