Native CSS-i ja Sassi pesastamise erinevused

Alates selle käivitamisest on CSS visalt keeldunud toetamast pesastusvalijate süntaksit. Alternatiiviks on alati olnud kasutada CSS-i eelprotsessorit nagu Sass. Kuid tänapäeval on pesastamine ametlikult osa CSS-ist. Saate seda funktsiooni otse kaasaegsetes brauserites proovida.

Kui lähete üle Sassist, peate arvestama erinevustega algse pesastuse ja Sassi pesastamise vahel. Mõlema pesastusfunktsiooni vahel on mõned olulised erinevused ja nende teadvustamine on üleminekul ülioluline.

Peate oma CSS-i elementide valijatega kasutama "&".

CSS-i pesastamine on endiselt spetsifikatsiooni mustand, millel on erinev brauseri tugi. Kontrollige kindlasti selliseid saite nagu caniuse.com ajakohase teabe saamiseks.

Siin on näide pesastamise tüübist, mida näete Sassis, kasutades SCSS-i süntaksit:

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

See CSS-i plokk määrab, et mis tahes järjestamata loend elemendis, millel on a

nav klass joondub painduva veeruna, üks võimalus HTML-i elementide paigutamine lehele. Lisaks on kogu ankurlingi tekst elementide sees, millel on a nav klass peaks olema must.

Natiivses CSS-is oleks selline pesastamine kehtetu. Selle toimimiseks peate lisama pesastatud elementide ette ampersandi sümboli (&), näiteks järgmiselt:

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

CSS-i pesastuse varajane versioon ei võimaldanud tüübivalijaid pesastada. Hiljutine muudatus tähendab, et te ei pea enam "&" kasutama, kuid Chrome'i ja Safari vanemad versioonid ei pruugi seda värskendatud süntaksit veel toetada.

Nüüd, kui kasutaksite valijat, mis algab sümboliga (nt klassi valija). sihtida lehe kindlat osa, võite ampersandi ära jätta. Nii CSS-is kui ka Sassis töötaks järgmine süntaks:

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

Te ei saa luua uut valijat, kasutades oma CSS-is "&".

Üks Sassi omadusi, mis teile tõenäoliselt meeldivad, on võime teha midagi sellist:

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

See Sassi kood kompileerub järgmisele töötlemata CSS-ile:

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

Omakeelses CSS-is ei saa uut valijat luua, kasutades "&". Sassi kompilaator asendab "&" põhielemendiga (nt. .nav), kuid natiivne CSS käsitleb "&" ja sellele järgnevat osa kahe eraldi valijana. Selle tulemusena proovib see luua liitvalijat, mis ei anna sama tulemust.

See näide töötab CSS-i algses versioonis:

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

See toimib, kuna esimene valija on sama, mis nav.nav-list tavalises CSS-is ja teine ​​on sama, mis nav.nav-link. Tühiku lisamine "&" ja valija vahele oleks samaväärne kirjutamisega nav .nav-list.

Kui kasutate omakeelses CSS-is ampersandi järgmiselt:

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

See on sama, mis selle kirjutamine:

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

See võib teile üllatusena tulla, arvestades, et mõlemad __nav-loend ja __nav-link on sees .nav valija. Kuid ampersand asetab tegelikult pesastatud elemendid emaelemendi ette.

Spetsiifilisus võib olla erinev

Veel üks asi, mida tuleb tähele panna, on mõju spetsiifilisusele, mida ei juhtu Sassis, vaid CSS-i pesastuses.

Oletame, et teil on a ja an element. Järgmise CSS-iga an kummaski neist elementidest kasutatakse serif-fonti:

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

Ülaltoodud Sassi koodi kompileeritud versioon on järgmine:

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

Kuid sama pesastussüntaks algses CSS-is annab teistsuguse tulemuse, mis on sisuliselt sama:

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

The on() valija käsitleb spetsiifilisuse reegleid veidi erinevalt Sassi pesastusest. Põhimõtteliselt on spetsiifilisus:on() täiendatakse automaatselt esitatud argumentide loendi kõige spetsiifilisema üksuseni.

Elementide järjekord võib valitud elementi muuta

Natiivses CSS-is pesastamine võib täielikult muuta seda, mida valija tegelikult tähendab (st valib täiesti erineva elemendi).

Mõelge näiteks järgmisele HTML-ile:

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

Ja järgmine CSS:

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

See on tulemus, kui kasutate CSS-i kompilaatorina Sassi:

Nüüd HTML-i plokis, kui soovite teisaldada klassiga tume teema selle sees üleskutse tegevusele, rikuks see valija (Sassi režiimis). Kuid kui lülitute tavalisele CSS-ile (st ilma CSS-i eelprotsessorita), töötavad stiilid edasi.

Selle põhjuseks on viis, kuidas :on() töötab kapoti all. Seega kompileeritakse ülaltoodud pesastatud CSS järgmiseks lihtsaks CSS-iks:

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

See täpsustab a .pealkiri see on mõlema järeltulija .tume-teema ja .kutse tegevusele. Kuid nende järjekord pole tegelikult oluline. Niikaua kui .pealkiri on järglane .kutse tegevusele ja .tume-teema, see töötab mõlemas järjekorras.

See on äärmuslik juhtum ja mitte midagi, millega nii sageli kokku puutute. Kuid arusaamine :on() selektori aluseks olevad funktsioonid aitavad teil hallata, kuidas pesastamine CSS-is töötab. See teeb ka CSS-i silumine palju lihtsam.

Siit saate teada, kuidas Sassi rakenduses React kasutada

Kuna Sass kompileerib CSS-i, saate seda kasutada peaaegu iga kasutajaliidese raamistikuga. CSS-i eelprotsessori saate installida Vue, Preacti, Svelte'i ja loomulikult Reacti projektidesse. Kõigi nende raamistike jaoks on Sassi häälestusprotsess samuti üsna lihtne.

Sassi kasutamise suurim eelis Reactis on see, et see võimaldab muutujate ja segude abil kirjutada puhtaid korduvkasutatavaid stiile. Reacti arendajana aitab Sassi kasutamise teadmine teil kirjutada puhtamat ja tõhusamat koodi ning muuta teid üldiselt paremaks arendajaks.