Diferențele dintre CSS nativ și Sass Nesting

De la lansare, CSS a refuzat cu insistență să accepte o sintaxă pentru selectoarele de imbricare. Alternativa a fost întotdeauna folosirea unui preprocesor CSS precum Sass. Dar astăzi, imbricarea face parte oficial din CSS nativ. Puteți încerca această funcție direct în browserele moderne.

Dacă migrați de la Sass, va trebui să țineți cont de orice diferențe dintre imbricarea nativă și imbricarea Sass. Există câteva diferențe cheie între ambele caracteristici de imbricare și să fii conștient de ele este crucial dacă faci schimbarea.

Trebuie să utilizați „&” cu selectoare de elemente în CSS nativ

Imbricarea CSS este încă o specificație nefinalizată, cu compatibilitate diferită pentru browser. Asigurați-vă că verificați site-uri precum caniuse.com pentru informații actualizate.

Iată un exemplu de tip de imbricare pe care l-ați vedea în Sass, folosind sintaxa SCSS:

.nav {
ul { display: flex; }
a { color: black; }
}

Acest bloc CSS specifică că orice listă neordonată din interiorul unui element cu a nav clasa se aliniază ca o coloană flexibilă, într-un mod de aranjarea elementelor HTML pe pagină. În plus, toate legăturile de ancorare din interiorul elementelor cu a nav clasa ar trebui să fie neagră.

Acum, în CSS nativ, acest tip de imbricare ar fi invalid. Pentru ca acesta să funcționeze, ar trebui să includeți simbolul ampersand (&) în fața elementelor imbricate, astfel:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

Versiunea timpurie de imbricare CSS nu permitea imbricarea selectoarelor de tip. O modificare recentă înseamnă că nu mai trebuie să utilizați „&”, dar este posibil ca versiunile mai vechi de Chrome și Safari să nu accepte încă această sintaxă actualizată.

Acum, dacă utilizați un selector care începe cu un simbol (de exemplu, selector de clasă) pentru a vizați o anumită parte a paginii, puteți omite și ampersand. Deci următoarea sintaxă ar funcționa atât în ​​CSS nativ, cât și în Sass:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Nu puteți crea un nou selector utilizând „&” în CSS nativ

Una dintre caracteristicile pe care probabil le-ați iubit la Sass este capacitatea de a face ceva de genul acesta:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Acest cod Sass se compilează în următorul CSS brut:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

În CSS nativ, nu puteți crea un nou selector folosind „&”. Compilatorul Sass înlocuiește „&” cu elementul părinte (de ex. .nav), dar CSS nativ va trata „&” și partea de după el ca doi selectori separati. Ca urmare, va încerca să facă un selector compus, care nu va da același rezultat.

Acest exemplu va funcționa în CSS nativ, totuși:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Acest lucru funcționează deoarece primul selector este același cu nav.nav-list în CSS simplu, iar al doilea este același ca nav.nav-link. Adăugarea unui spațiu între „&” și selector ar fi echivalent cu scrierea nav .nav-list.

În CSS nativ, dacă utilizați ampersand astfel:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

Este la fel cu a scrie asta:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Acest lucru ar putea fi o surpriză pentru tine, având în vedere că atât __nav-list și __nav-link sunt în interiorul .nav selector. Dar ampersand plasează de fapt elementele imbricate în fața elementului părinte.

Specificitatea poate fi diferită

Un alt lucru de remarcat este impactul asupra specificității care nu se întâmplă în Sass, ci se întâmplă în imbricarea CSS nativă.

Deci, să presupunem că ai un si un element. Cu următorul CSS, an în oricare dintre aceste elemente se va folosi un font serif:

#main, article {
h2 {
font-family: serif;
 }
}

Versiunea compilată a codului Sass de mai sus este următoarea:

#mainh2,
articleh2 {
font-family: serif;
}

Dar aceeași sintaxă de imbricare în CSS nativ va produce un rezultat diferit, efectiv același cu:

:is(#main, article) h2 {
font-family: serif;
}

The este() Selectorul gestionează regulile de specificitate ușor diferit de imbricarea Sass. Practic, specificul:este() este actualizat automat la cel mai specific element din lista de argumente furnizată.

Ordinea elementelor ar putea schimba elementul selectat

Imbricarea în CSS nativ poate schimba complet ceea ce înseamnă de fapt selectorul (adică selectează un element complet diferit).

Luați în considerare următorul cod HTML, de exemplu:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

Și următorul CSS:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Acesta este rezultatul dacă utilizați Sass ca compilator CSS:

Acum, în blocul HTML, dacă ar fi să mutați cu clasa de temă întunecată în interiorul celui de apel la acțiune, ar sparge selectorul (în modul Sass). Dar când treceți la CSS obișnuit (adică fără preprocesor CSS), stilurile vor continua să funcționeze.

Acest lucru se datorează modului în care :este() lucrează sub capotă. Deci, CSS imbricat de mai sus se compilează în următorul CSS simplu:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Aceasta este specificarea a .rubrica care este un descendent al ambelor .temă-întunecată și .apel la acțiune. Dar ordinea acestora nu contează cu adevărat. Atâta timp cât .rubrica este descendentul lui .apel la acțiune și .temă-întunecată, funcționează în oricare ordine.

Acesta este un caz limită și nu ceva cu care te vei întâlni atât de des. Dar înțelegerea :este() Funcționalitatea de bază a selectorului vă poate ajuta să stăpâniți cum funcționează imbricarea în CSS. Acest lucru face, de asemenea depanarea CSS-ului dvs mult mai ușor.

Aflați cum să utilizați Sass în React

Deoarece Sass se compilează în CSS, îl puteți utiliza practic cu orice cadru UI. Puteți instala preprocesorul CSS în proiectele Vue, Preact, Svelte și, desigur, React. Procesul de configurare pentru Sass pentru toate aceste cadre este, de asemenea, destul de simplu.

Cel mai mare avantaj al utilizării Sass în React este că vă permite să scrieți stiluri curate, reutilizabile, folosind variabile și mixuri. În calitate de dezvoltator React, știind cum să utilizați Sass vă va ajuta să scrieți cod mai curat și mai eficient și vă va face un dezvoltator mai bun în general.