Rozdiely medzi natívnym CSS a Sass Nesting

Od svojho spustenia CSS tvrdohlavo odmieta podporovať syntax pre vnorené selektory. Alternatívou vždy bolo použitie CSS preprocesora ako Sass. Dnes je však hniezdenie oficiálne súčasťou natívneho CSS. Túto funkciu si môžete vyskúšať priamo v moderných prehliadačoch.

Ak migrujete zo Sass, budete musieť vziať do úvahy všetky rozdiely medzi natívnym vnorením a vnorením Sass. Medzi oboma funkciami vnorenia je niekoľko kľúčových rozdielov a pri prepínaní je dôležité, aby ste si ich boli vedomí.

Musíte použiť "&" so selektormi prvkov v natívnom CSS

CSS Nesting je stále návrh špecifikácie s rôznou podporou prehliadačov. Nezabudnite skontrolovať stránky ako caniuse.com pre aktuálne informácie.

Tu je príklad typu vnorenia, ktorý by ste videli v Sass, pomocou syntaxe SCSS:

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

Tento blok CSS určuje, že akýkoľvek neusporiadaný zoznam vnútri prvku s a

nav trieda sa zarovná ako ohybný stĺpik, jedným zo spôsobov rozmiestnenie prvkov HTML na stránke. Okrem toho, všetok text odkazu na kotvu vo vnútri prvkov s a nav trieda by mala byť čierna.

Teraz by v natívnom CSS bol tento druh vnorenia neplatný. Aby to fungovalo, museli by ste pred vnorené prvky zahrnúť symbol ampersand (&), napríklad:

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

Skorá verzia vnorenia CSS neumožňovala vnorenie selektorov typu. Nedávna zmena znamená, že už nemusíte používať „&“, ale staršie verzie prehliadačov Chrome a Safari nemusia túto aktualizovanú syntax ešte podporovať.

Teraz, ak ste použili selektor, ktorý začína symbolom (napr. selektor triedy). zacieliť na konkrétnu časť stránky, znak ampersand môžete vynechať. Nasledujúca syntax by teda fungovala v natívnom CSS aj v Sass:

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

Nemôžete vytvoriť nový selektor pomocou „&“ v natívnom CSS

Jednou z funkcií, ktoré sa vám na Sass pravdepodobne páčia, je možnosť urobiť niečo také:

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

Tento kód Sass sa skompiluje do nasledujúceho surového CSS:

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

V natívnom CSS nemôžete vytvoriť nový selektor pomocou „&“. Kompilátor Sass nahradí „&“ nadradeným prvkom (napr. .nav), ale natívny CSS bude považovať znak „&“ a časť za ním za dva samostatné selektory. V dôsledku toho sa pokúsi vytvoriť zložený selektor, ktorý neprinesie rovnaký výsledok.

Tento príklad bude fungovať v natívnom CSS, hoci:

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

Funguje to, pretože prvý volič je rovnaký ako nav.nav-list v jednoduchom CSS a druhý je rovnaký ako nav.nav-link. Pridanie medzery medzi "&" a selektor by sa rovnalo písaniu nav .nav-list.

Ak v natívnom CSS použijete ampersand takto:

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

Je to rovnaké ako napísať toto:

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

Môže to byť pre vás prekvapením vzhľadom na to, že obe __nav-list a __nav-link sú vo vnútri .nav selektor. Ampersand však v skutočnosti umiestňuje vnorené prvky pred nadradený prvok.

Špecifickosť môže byť odlišná

Ďalšou vecou, ​​​​ktorú si treba všimnúť, je vplyv na špecifickosť, ktorý sa nedeje v Sass, ale vyskytuje sa v natívnom vnorení CSS.

Povedzme teda, že máte a a element. S nasledujúcim CSS, an v ktoromkoľvek z týchto prvkov sa použije pätkové písmo:

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

Kompilovaná verzia vyššie uvedeného kódu Sass je nasledovná:

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

Rovnaká syntax vnorenia v natívnom CSS však prinesie iný výsledok, v podstate rovnaký ako:

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

The je() selektor zaobchádza s pravidlami špecifickosti mierne odlišne od vnorenia Sass. V zásade ide o špecifickosť:je() sa automaticky inovuje na najšpecifickejšiu položku v zozname poskytnutých argumentov.

Poradie prvkov môže zmeniť vybraný prvok

Vnorenie do natívneho CSS môže úplne zmeniť, čo vlastne selektor znamená (t.j. vyberie úplne iný prvok).

Zvážte napríklad nasledujúci HTML:

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

A nasledujúci CSS:

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

Toto je výsledok, ak používate Sass ako kompilátor CSS:

Teraz v bloku HTML, ak by ste presunuli súbor s triedou temná téma vnútri toho výzva do akcie, zlomilo by to volič (v režime Sass). Ale keď prejdete na bežné CSS (t. j. bez predprocesora CSS), štýly budú naďalej fungovať.

Je to kvôli spôsobu, akým sa :je() pracuje pod kapotou. Takže vyššie vnorené CSS sa skompiluje do nasledujúceho obyčajného CSS:

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

Toto špecifikuje a .nadpis to je potomok oboch .tmavá-téma a .výzva do akcie. Ale na ich poradí nezáleží. Pokiaľ .nadpis je potomkom .výzva do akcie a .tmavá-téma, funguje v oboch poradí.

Toto je okrajový prípad a nie niečo, na čo narazíte tak často. Ale pochopenie :je() Základná funkcia selektora vám môže pomôcť zvládnuť vnorenie v CSS. Toto tiež robí ladenie vášho CSS oveľa lahšie.

Naučte sa používať Sass v Reacte

Keďže Sass kompiluje do CSS, môžete ho použiť prakticky s akýmkoľvek rámcom používateľského rozhrania. Preprocesor CSS môžete nainštalovať v projektoch Vue, Preact, Svelte a – samozrejme – React. Proces nastavenia pre Sass pre všetky tieto rámce je tiež celkom jednoduchý.

Najväčšou výhodou používania Sass v React je, že vám umožňuje písať čisté, opakovane použiteľné štýly pomocou premenných a mixinov. Ako vývojár Reactu vám to, že viete, ako používať Sass, pomôže písať čistejší a efektívnejší kód a celkovo z vás urobí lepšieho vývojára.