Razlike med izvornim CSS in gnezdenjem Sass

Odkar se je začel, je CSS vztrajno zavračal podporo sintaksi za izbirnike gnezdenja. Alternativa je bila vedno uporaba predprocesorja CSS, kot je Sass. Toda danes je gnezdenje uradno del izvornega CSS. To funkcijo lahko preizkusite neposredno v sodobnih brskalnikih.

Če se selite iz Sass, boste morali upoštevati morebitne razlike med domačim gnezdenjem in gnezdenjem Sass. Obstaja nekaj ključnih razlik med obema funkcijama gnezdenja in zavedanje o njih je ključnega pomena, če se odločate za zamenjavo.

Z izbirniki elementov v izvornem CSS morate uporabiti "&".

CSS Nesting je še vedno osnutek specifikacije z različno podporo brskalnika. Ne pozabite preveriti spletnih mest, kot je caniuse.com za ažurne informacije.

Tukaj je primer vrste gnezdenja, ki bi ga videli v Sass, z uporabo sintakse SCSS:

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

Ta blok CSS določa, da vsak neurejen seznam znotraj elementa z a

nav razred se poravna kot stolpec flex, enosmerno postavitev elementov HTML na stran. Poleg tega vse besedilo sidrne povezave znotraj elementov z a nav razred mora biti črn.

V izvornem CSS bi bilo takšno gnezdenje neveljavno. Da bi delovalo, bi morali pred ugnezdene elemente vključiti simbol & (&), takole:

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

Zgodnja različica ugnezdenja CSS ni dovoljevala ugnezdenja izbirnikov vrst. Nedavna sprememba pomeni, da vam ni več treba uporabljati "&", vendar starejši različici Chroma in Safarija morda še ne podpirata te posodobljene sintakse.

Če bi zdaj uporabljali izbirnik, ki se začne s simbolom (npr. izbirnik razreda), da ciljajte na določen del strani, lahko izpustite ampersand. Torej bi naslednja sintaksa delovala tako v izvirnem CSS kot Sass:

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

Ne morete ustvariti novega izbirnika z uporabo "&" v izvornem CSS

Ena od funkcij, ki vam je pri Sass verjetno všeč, je zmožnost, da naredite nekaj takega:

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

Ta koda Sass se prevede v naslednji neobdelani CSS:

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

V izvornem CSS-ju ne morete ustvariti novega izbirnika z uporabo "&". Prevajalnik Sass zamenja "&" z nadrejenim elementom (npr. .nav), vendar bo izvorni CSS obravnaval "&" in del za njim kot dva ločena izbirnika. Posledično bo poskušal narediti sestavljeni selektor, kar pa ne bo dalo enakega rezultata.

Ta primer bo deloval v izvirnem CSS, vendar:

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

To deluje, ker je prvi izbirnik enak nav.nav-seznam v navadnem CSS, drugi pa je enak kot nav.nav-link. Dodajanje presledka med "&" in izbirnikom bi bilo enakovredno pisanju nav .nav-seznam.

Če v izvirnem CSS uporabite ampersand takole:

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

To je enako, kot če bi napisal tole:

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

To bi vas lahko presenetilo, saj oba __nav-seznam in __nav-povezava so znotraj .nav selektor. Toda ampersand dejansko postavi ugnezdene elemente pred nadrejeni element.

Specifičnost je lahko drugačna

Še ena stvar, ki jo je treba opozoriti, je vpliv na specifičnost, ki se ne zgodi v Sass, vendar se zgodi v izvornem gnezdenju CSS.

Recimo, da imate in an element. Z naslednjim CSS, an v katerem koli od teh elementov bo uporabljena pisava serif:

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

Prevedena različica zgornje kode Sass je naslednja:

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

Toda ista sintaksa gnezdenja v izvirnem CSS bo ustvarila drugačen rezultat, dejansko enak kot:

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

The je () selektor obravnava pravila specifičnosti nekoliko drugače kot gnezdenje Sass. V bistvu je specifičnost:je () se samodejno nadgradi na najbolj specifičen element na seznamu navedenih argumentov.

Vrstni red elementov lahko spremeni izbrani element

Gnezdenje v izvirnem CSS lahko popolnoma spremeni, kaj izbirnik dejansko pomeni (tj. izbere popolnoma drugačen element).

Upoštevajte na primer naslednji HTML:

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

In naslednji CSS:

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

To je rezultat, če uporabljate Sass kot prevajalnik CSS:

Zdaj v bloku HTML, če bi premaknili z razredom temna tema znotraj tistega poziv k dejanju, bi pokvaril izbirnik (v načinu Sass). Toda ko preklopite na običajni CSS (tj. brez predprocesorja CSS), bodo slogi še naprej delovali.

To je zaradi načina, na katerega :je() deluje pod pokrovom. Tako se zgornji ugnezdeni CSS prevede v naslednji navaden CSS:

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

To določa a .naslov ki je potomec obeh .temna tema in .poziv k dejanju. Toda njihov vrstni red pravzaprav ni pomemben. Dokler je .naslov je potomec .poziv k dejanju in .temna tema, deluje v katerem koli vrstnem redu.

To je robni primer in ne boste tako pogosto naleteli. Toda razumevanje :je() Osnovna funkcionalnost izbirnika vam lahko pomaga obvladati delovanje gnezdenja v CSS. To tudi naredi odpravljanje napak v vašem CSS veliko lažje.

Naučite se uporabljati Sass v Reactu

Ker Sass prevaja v CSS, ga lahko uporabljate s skoraj katerim koli ogrodjem uporabniškega vmesnika. Predprocesor CSS lahko namestite v projekte Vue, Preact, Svelte in – seveda – React. Tudi postopek namestitve za Sass za vsa ta ogrodja je precej preprost.

Največja prednost uporabe Sass v Reactu je, da vam omogoča pisanje čistih slogov, ki jih je mogoče ponovno uporabiti, z uporabo spremenljivk in mešanic. Kot razvijalec React vam bo znanje, kako uporabljati Sass, pomagalo napisati čistejšo in učinkovitejšo kodo ter na splošno postati boljši razvijalec.