A natív CSS és a Sass Nesting közötti különbségek

Indítása óta a CSS határozottan visszautasította a beágyazóválasztók szintaxisának támogatását. Az alternatíva mindig is egy CSS-előfeldolgozó, például a Sass használata volt. De ma a beágyazás hivatalosan a natív CSS része. Ezt a funkciót közvetlenül a modern böngészőkben is kipróbálhatja.

Ha Sass rendszerről vált át, figyelembe kell vennie a natív és a Sass beágyazás közötti különbségeket. Van néhány alapvető különbség a két beágyazási funkció között, és ezek tisztában tartása elengedhetetlen a váltáshoz.

Az "&" jelet kell használnia az elemválasztókkal a natív CSS-ben

A CSS-beágyazás továbbra is egy specifikációvázlat, változó böngészőtámogatással. Ügyeljen arra, hogy ellenőrizze az olyan webhelyeket, mint a caniuse.com naprakész információkért.

Íme egy példa a beágyazás típusára, amelyet a Sass-ban láthat az SCSS-szintaxis használatával:

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

Ez a CSS-blokk azt határozza meg, hogy minden rendezetlen lista egy elemen belül a nav osztály flex oszlopként igazodik, az egyik módja annak HTML elemek elhelyezése az oldalon. Ezenkívül az összes horgonyhivatkozás szövege az a nav osztály fekete legyen.

A natív CSS-ben ez a fajta beágyazás érvénytelen lenne. Ahhoz, hogy ez működjön, el kell helyeznie az „és” jelet (&) a beágyazott elemek elé, például:

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

A CSS-beágyazás korai verziója nem tette lehetővé a típusválasztók egymásba ágyazását. Egy közelmúltbeli változás azt jelenti, hogy többé nem kell az „&” jelet használnia, de előfordulhat, hogy a Chrome és a Safari régebbi verziói még nem támogatják ezt a frissített szintaxist.

Most, ha olyan választót használ, amely egy szimbólummal kezdődik (pl. osztályválasztó) a az oldal egy meghatározott részét célozza meg, elhagyhatja az "és" jelet. Tehát a következő szintaxis működne mind a natív CSS-ben, mind a Sass-ban:

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

A natív CSS-ben nem hozhat létre új választót az „&” jellel

Az egyik olyan funkció, amelyet valószínűleg szeret a Sass-ban, az a képesség, hogy valami ilyesmit tegyen:

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

Ez a Sass-kód a következő nyers CSS-re fordítódik:

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

A natív CSS-ben nem hozhat létre új választót az „&” használatával. A Sass fordító lecseréli az "&"-t a szülőelemmel (pl. .nav), de a natív CSS két külön választóként kezeli az "&"-t és az azt követő részt. Ennek eredményeként megpróbál egy összetett választót létrehozni, amely nem adja ugyanazt az eredményt.

Ez a példa azonban natív CSS-ben működik:

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

Ez azért működik, mert az első választó ugyanaz, mint nav.nav-list sima CSS-ben, a második pedig ugyanaz, mint nav.nav-link. Az "&" és a választó közé szóköz hozzáadása egyenértékű az írással nav .nav-list.

A natív CSS-ben, ha így használja az "és" jelet:

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

Ez ugyanaz, mint ezt leírni:

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

Ez meglepő lehet számodra, tekintve, hogy mind a __nav-list és __nav-link belül vannak .nav választó. De az „és” jel valójában a beágyazott elemeket a szülőelem elé helyezi.

A specifikusság eltérő lehet

Egy másik dolog, amit meg kell jegyezni, a specifikusságra gyakorolt ​​hatás, amely nem a Sass-ben, hanem a natív CSS-beágyazásban történik.

Tehát tegyük fel, hogy van egy és egy elem. A következő CSS-sel an ezen elemek bármelyikében serif betűtípust fog használni:

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

A fenti Sass kód lefordított verziója a következő:

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

De ugyanaz a beágyazó szintaxis a natív CSS-ben más eredményt ad, gyakorlatilag ugyanazt, mint:

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

A van() A szelektor némileg eltérően kezeli a specifikációs szabályokat, mint a Sass beágyazás. Alapvetően a sajátossága:van() automatikusan frissül a legspecifikusabb elemre a megadott argumentumok listájában.

Az elemek sorrendje megváltoztathatja a kiválasztott elemet

A natív CSS-be ágyazás teljesen megváltoztathatja, hogy a választó mit jelent valójában (azaz egy teljesen más elemet választ ki).

Vegyük például a következő HTML-kódot:

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

És a következő CSS:

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

Ez az eredmény, ha a Sass-t használja CSS-fordítóként:

Most a HTML blokkban, ha áthelyezné a osztályával sötét téma azon belül cselekvésre ösztönzés, megtörné a választót (Sass módban). De ha normál CSS-re vált (vagyis nincs CSS-előfeldolgozó), a stílusok továbbra is működni fognak.

Ez annak köszönhető, hogy a :is() a motorháztető alatt működik. Tehát a fenti beágyazott CSS a következő egyszerű CSS-be fordul:

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

Ez meghatározza a .cím hogy mindkettő leszármazottja .sötéttéma és .cselekvésre ösztönzés. De ezek sorrendje nem igazán számít. Amíg a .cím leszármazottja .cselekvésre ösztönzés és .sötéttéma, bármelyik sorrendben működik.

Ez egy szélsőséges eset, és nem olyasvalami, amivel olyan gyakran találkozik. De megértve a :is() A Selector mögöttes funkciói segíthetnek elsajátítani, hogyan működik a beágyazás a CSS-ben. Ez is teszi a CSS hibakeresése sokkal könnyebb.

Tanulja meg a Sass használatát a Reactban

Mivel a Sass CSS-re fordít, gyakorlatilag bármilyen felhasználói felülettel használható. A CSS-előfeldolgozót telepítheti Vue, Preact, Svelte és – természetesen – React projektekben. A Sass beállítási folyamata ezekhez a keretrendszerekhez szintén meglehetősen egyszerű.

A React Sass használatának legnagyobb előnye, hogy lehetővé teszi tiszta, újrafelhasználható stílusok írását változók és mixinek segítségével. React fejlesztőként a Sass használatának ismerete segít tisztább, hatékonyabb kódot írni, és összességében jobb fejlesztővé válik.