Razlike između izvornog CSS-a i Sass ugniježđenja

Otkako je lansiran, CSS je uporno odbijao podržati sintaksu za ugniježđene selektore. Alternativa je uvijek bila korištenje CSS predprocesora kao što je Sass. Ali danas je gniježđenje službeno dio izvornog CSS-a. Ovu značajku možete isprobati izravno u modernim preglednicima.

Ako migrirate sa Sass-a, morat ćete uzeti u obzir sve razlike između izvornog ugniježđivanja i Sass-a. Postoje neke ključne razlike između obje značajke ugniježđivanja, a biti svjestan njih ključno je ako se mijenjate.

Morate koristiti "&" s biračima elemenata u izvornom CSS-u

CSS Nesting je još uvijek nacrt specifikacije, s različitim podrškama preglednika. Svakako provjerite stranice poput caniuse.com za ažurne informacije.

Evo primjera vrste ugniježđivanja koju biste vidjeli u Sass-u, koristeći SCSS sintaksu:

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

Ovaj CSS blok specificira da svaki neuređeni popis unutar elementa s a

nav klasa se poravnava kao fleksibilni stupac, u jednom smjeru postavljanje HTML elemenata na stranicu. Osim toga, sav tekst veze sidra unutar elemenata s a nav klasa bi trebala biti crna.

Sada, u izvornom CSS-u, takva vrsta ugniježđivanja bila bi nevažeća. Da bi to funkcioniralo, morali biste uključiti simbol ampersand (&) ispred ugniježđenih elemenata, ovako:

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

Rana verzija CSS ugniježđivanja nije dopuštala ugniježđivanje selektora tipa. Nedavna promjena znači da više ne morate koristiti "&", ali starije verzije Chromea i Safarija možda još ne podržavaju ovu ažuriranu sintaksu.

Ako ste koristili selektor koji počinje simbolom (npr. selektor klase) za ciljati na određeni dio stranice, možete izostaviti znak &. Dakle, sljedeća sintaksa bi funkcionirala i u izvornom CSS-u i u Sass-u:

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

Ne možete stvoriti novi selektor koristeći "&" u izvornom CSS-u

Jedna od značajki koje vjerojatno volite kod Sass-a je mogućnost da napravite nešto poput ovoga:

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

Ovaj Sass kod kompajlira se u sljedeći neobrađeni CSS:

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

U izvornom CSS-u ne možete stvoriti novi selektor koristeći "&". Sass prevodilac zamjenjuje "&" nadređenim elementom (npr. .nav), ali izvorni CSS tretirat će "&" i dio nakon njega kao dva zasebna birača. Kao rezultat toga, pokušat će napraviti složeni selektor, što neće dati isti rezultat.

Ovaj će primjer raditi u izvornom CSS-u, ali:

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

Ovo funkcionira jer je prvi selektor isti kao nav.nav-list u običnom CSS-u, a drugi je isti kao nav.nav-link. Dodavanje razmaka između "&" i selektora bilo bi jednako pisanju nav .nav-list.

U izvornom CSS-u, ako koristite ampersand ovako:

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

To je isto kao da pišeš ovo:

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

Ovo bi vas moglo iznenaditi, s obzirom na to da oboje __navigacijski popis i __navigacijska veza su unutar .nav selektor. Ali ampersand zapravo postavlja ugniježđene elemente ispred nadređenog elementa.

Specifičnost može biti različita

Još jedna stvar koju treba napomenuti je utjecaj na specifičnost koji se ne događa u Sassu, ali se događa u nativnom CSS ugniježđivanju.

Pa recimo da imate i an element. Uz sljedeći CSS, an u bilo kojem od ovih elemenata koristit će serifni font:

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

Prevedena verzija gornjeg Sass koda je sljedeća:

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

Ali ista sintaksa ugniježđivanja u izvornom CSS-u proizvest će drugačiji rezultat, zapravo isti kao:

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

The je() selektor obrađuje pravila specifičnosti nešto drugačije od Sass gniježđenja. U osnovi, specifičnost:je() automatski se nadograđuje na najspecifičniju stavku na popisu ponuđenih argumenata.

Redoslijed elemenata može promijeniti odabrani element

Ugniježđivanje u nativni CSS može u potpunosti promijeniti ono što selektor zapravo znači (tj. odabire potpuno drugačiji element).

Razmotrite, na primjer, sljedeći HTML:

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

I sljedeći CSS:

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

Ovo je rezultat ako koristite Sass kao CSS prevodilac:

Sada u HTML bloku, ako želite premjestiti s razredom mračna tema unutar onoga od poziv na akciju, to bi pokvarilo selektor (u Sass modu). Ali kada prijeđete na obični CSS (tj. bez CSS pretprocesora), stilovi će nastaviti raditi.

To je zbog načina na koji :je() radi ispod haube. Dakle, gornji ugniježđeni CSS kompajlira se u sljedeći obični CSS:

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

Ovo je specificiranje a .naslov koji je potomak obojice .tamna tema i .poziv na akciju. Ali njihov redoslijed zapravo nije bitan. Sve dok .naslov je potomak .poziv na akciju i .tamna tema, radi bilo kojim redoslijedom.

Ovo je rubni slučaj i nije nešto na što ćete tako često naletjeti. Ali razumijevanje :je() temeljna funkcionalnost selektora može vam pomoći da svladate kako gniježđenje funkcionira u CSS-u. Ovo također čini otklanjanje pogrešaka u vašem CSS-u puno lakše.

Naučite kako koristiti Sass u Reactu

Budući da se Sass kompilira u CSS, možete ga koristiti s gotovo bilo kojim okvirom korisničkog sučelja. CSS predprocesor možete instalirati u Vue, Preact, Svelte i, naravno, React projekte. Proces postavljanja za Sass za sve te okvire također je prilično jednostavan.

Najveća prednost korištenja Sass-a u Reactu je ta što vam omogućuje pisanje čistih stilova koji se mogu ponovno koristiti pomoću varijabli i mixina. Kao React programeru, znanje kako koristiti Sass pomoći će vam da pišete čišći, učinkovitiji kod i učiniti vas općenito boljim programerom.