Rozdíly mezi Native CSS a Sass Nesting

Od svého spuštění CSS zarputile odmítlo podporovat syntaxi pro vnořené selektory. Alternativou vždy bylo použití CSS preprocesoru jako Sass. Dnes je ale hnízdění oficiálně součástí nativního CSS. Tuto funkci si můžete vyzkoušet přímo v moderních prohlížečích.

Pokud migrujete ze Sass, budete muset vzít v úvahu všechny rozdíly mezi nativním vnořením a vnořením Sass. Mezi oběma funkcemi vnoření jsou některé klíčové rozdíly a při přechodu na ně je zásadní být si jich vědom.

Musíte použít "&" se selektory prvků v nativním CSS

CSS Nesting je stále návrh specifikace s různou podporou prohlížečů. Nezapomeňte zkontrolovat stránky jako caniuse.com pro aktuální informace.

Zde je příklad typu vnoření, který byste viděli v Sass, pomocí syntaxe SCSS:

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

Tento blok CSS určuje, že jakýkoli neuspořádaný seznam uvnitř prvku s a

nav třída se zarovná jako flexibilní sloupec, jeden způsob rozmístění prvků HTML na stránce. Navíc veškerý text odkazu kotvy uvnitř prvků s a nav třída by měla být černá.

Nyní by v nativním CSS byl tento druh vnoření neplatný. Aby to fungovalo, museli byste před vnořené prvky vložit symbol ampersand (&), například:

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

Raná verze CSS vnořování neumožňovala vnořování selektorů typu. Nedávná změna znamená, že již nemusíte používat „&“, ale starší verze Chrome a Safari nemusí tuto aktualizovanou syntaxi ještě podporovat.

Nyní, pokud jste používali selektor, který začíná symbolem (např. selektor třídy). zacílit na konkrétní část stránky, můžete vynechat ampersand. Následující syntaxe by tedy fungovala v nativním CSS i Sass:

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

Nemůžete vytvořit nový selektor pomocí "&" v nativním CSS

Jednou z funkcí, kterou na Sass pravděpodobně milujete, je možnost udělat něco takového:

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

Tento kód Sass se zkompiluje do následujícího surového CSS:

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

V nativním CSS nemůžete vytvořit nový selektor pomocí "&". Kompilátor Sass nahradí „&“ nadřazeným prvkem (např. .nav), ale nativní CSS bude považovat „&“ a část za ním za dva samostatné selektory. V důsledku toho se pokusí vytvořit složený selektor, který nedává stejný výsledek.

Tento příklad bude fungovat v nativním CSS, ačkoli:

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

To funguje, protože první volič je stejný jako nav.nav-list v prostém CSS a druhý je stejný jako nav.nav-link. Přidání mezery mezi "&" a selektor by bylo ekvivalentní psaní nav .nav-list.

Pokud v nativním CSS použijete ampersand takto:

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

Je to stejné jako napsat toto:

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

To pro vás může být překvapením, vezmeme-li v úvahu, že obojí __nav-list a __nav-link jsou uvnitř .nav volič. Ale ampersand ve skutečnosti umístí vnořené prvky před nadřazený prvek.

Specifičnost může být různá

Další věc, kterou je třeba poznamenat, je dopad na specifičnost, ke kterému nedochází v Sass, ale děje se v nativním vnoření CSS.

Řekněme tedy, že máte a a živel. S následujícím CSS, an v každém z těchto prvků použije patkové písmo:

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

Kompilovaná verze výše uvedeného kódu Sass je následující:

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

Ale stejná syntaxe vnoření v nativním CSS vytvoří jiný výsledek, v podstatě stejný jako:

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

The je() selektor zpracovává pravidla specifičnosti mírně odlišně od vnořování Sass. V zásadě jde o specifičnost:je() se automaticky upgraduje na nejkonkrétnější položku v seznamu poskytnutých argumentů.

Pořadí prvků může změnit vybraný prvek

Vnoření do nativního CSS může zcela změnit, co vlastně selektor znamená (tj. vybere úplně jiný prvek).

Zvažte například následující HTML:

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

A následující CSS:

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

Toto je výsledek, pokud použijete Sass jako kompilátor CSS:

Nyní v bloku HTML, pokud byste přesunuli soubor se třídou tmavé téma uvnitř toho výzva k akci, zlomilo by to volič (v režimu Sass). Když ale přepnete na běžné CSS (tedy bez preprocesoru CSS), styly budou nadále fungovat.

Je to kvůli způsobu, jakým :je() pracuje pod kapotou. Výše vnořené CSS se tedy zkompiluje do následujícího prostého CSS:

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

Toto specifikuje a .nadpis že je potomkem obou .tmavé téma a .výzva k akci. Ale na jejich pořadí nezáleží. Dokud .nadpis je potomkem .výzva k akci a .tmavé téma, funguje v obou pořadích.

Toto je okrajový případ a ne tak často. Ale pochopení :je() základní funkce selektoru vám mohou pomoci zvládnout vnořování v CSS. To také dělá ladění vašeho CSS mnohem jednodušší.

Naučte se používat Sass v Reactu

Vzhledem k tomu, že Sass kompiluje do CSS, můžete jej použít prakticky s jakýmkoli rozhraním uživatelského rozhraní. Preprocesor CSS můžete nainstalovat do projektů Vue, Preact, Svelte a – samozřejmě – React. Proces nastavení pro Sass pro všechny tyto rámce je také docela jednoduchý.

Největší výhodou použití Sass v Reactu je, že vám umožňuje psát čisté, opakovaně použitelné styly pomocí proměnných a mixinů. Jako vývojáři Reactu vám znalost, jak používat Sass, pomůže psát čistší a efektivnější kód a celkově z vás udělá lepšího vývojáře.