Native CSS ir Sass Nesting skirtumai

Nuo pat paleidimo CSS atkakliai atsisakė palaikyti įdėjimo parinktuvų sintaksę. Alternatyva visada buvo naudoti CSS išankstinį procesorių, pvz., Sass. Tačiau šiandien lizdų įdėjimas oficialiai yra vietinės CSS dalis. Šią funkciją galite išbandyti tiesiogiai šiuolaikinėse naršyklėse.

Jei perkeliate iš Sass, turėsite atsižvelgti į visus skirtumus tarp savojo ir Sass įdėjimo. Yra keletas esminių skirtumų tarp abiejų įdėjimo funkcijų, todėl labai svarbu juos žinoti, jei norite pakeisti.

Turite naudoti „&“ su elementų parinkikliais vietiniame CSS

CSS įterpimas vis dar yra specifikacijos juodraštis su skirtingu naršyklės palaikymu. Būtinai patikrinkite tokias svetaines kaip caniuse.com gauti naujausią informaciją.

Štai įdėjimo, kurį pamatytumėte Sass, naudojant SCSS sintaksę, pavyzdys:

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

Šis CSS blokas nurodo, kad bet koks netvarkingas sąrašas elemente su a

nav klasė lygiuojasi kaip lankstus stulpelis, vienas iš būdų HTML elementų išdėstymas puslapyje. Be to, visas inkaro nuorodos tekstas elementuose su a nav klasė turi būti juoda.

Dabar vietinėje CSS toks įdėjimas būtų netinkamas. Kad tai veiktų, prieš įdėtus elementus turėtumėte įtraukti ampersando simbolį (&), pvz.:

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

Ankstesnė CSS įdėjimo versija neleido įdėti tipo parinktuvų. Neseniai atliktas pakeitimas reiškia, kad nebereikia naudoti „&“, tačiau senesnės „Chrome“ ir „Safari“ versijos dar gali nepalaikyti šios atnaujintos sintaksės.

Dabar, jei naudojote parinkiklį, kuris prasideda simboliu (pvz., klasės parinkiklis). taikyti pagal konkrečią puslapio dalį, galite praleisti ampersandą. Taigi ši sintaksė veiktų ir vietiniame CSS, ir Sass:

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

Negalite sukurti naujo parinkiklio naudodami „&“ vietiniame CSS

Viena iš „Sass“ savybių, kuri jums tikriausiai patinka, yra galimybė atlikti kažką panašaus į tai:

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

Šis Sass kodas kompiliuojamas į šį neapdorotą CSS:

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

Savajame CSS negalite sukurti naujo parinkiklio naudodami „&“. „Sass“ kompiliatorius „&“ pakeičia pirminiu elementu (pvz., .nav), tačiau vietinis CSS laikys „&“ ir po jo esančią dalį kaip du atskirus parinkiklius. Dėl to jis bandys sukurti sudėtinį parinkiklį, kuris neduos tokio paties rezultato.

Tačiau šis pavyzdys veiks vietinėje CSS:

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

Tai veikia, nes pirmasis parinkiklis yra toks pat kaip nav.nav-list paprastame CSS, o antrasis yra toks pat kaip nav.nav-link. Tarpo pridėjimas tarp „&“ ir parinkiklio prilygtų rašymui nav .nav-list.

Vietinėje CSS, jei naudojate ampersandą taip:

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

Tai tas pats, kas rašyti tai:

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

Tai gali jus nustebinti, atsižvelgiant į tai, kad tiek __nav-list ir __nav-link yra viduje .nav parinkiklis. Tačiau ampersandas iš tikrųjų deda įdėtus elementus prieš pirminį elementą.

Specifiškumas gali būti skirtingas

Kitas dalykas, į kurį reikia atkreipti dėmesį, yra poveikis specifiškumui, kuris nevyksta naudojant „Sass“, bet vykstant vietiniam CSS įdėjimui.

Taigi, tarkime, kad turite a ir an elementas. Naudodami šį CSS, an bet kuriame iš šių elementų bus naudojamas serifinis šriftas:

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

Sukompiliuota aukščiau pateikto Sass kodo versija yra tokia:

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

Tačiau ta pati įdėjimo sintaksė savajame CSS duos kitokį rezultatą, iš esmės tokį patį kaip:

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

The yra () parinkiklis konkretumo taisykles apdoroja šiek tiek kitaip nei Sass įdėjimas. Iš esmės specifiškumas:yra () automatiškai atnaujinamas į konkretiausią pateiktų argumentų sąrašo elementą.

Elementų tvarka gali pakeisti pasirinktą elementą

Įdėjimas į savąjį CSS gali visiškai pakeisti tai, ką iš tikrųjų reiškia parinkiklis (t. y. pasirenka visiškai kitą elementą).

Apsvarstykite, pavyzdžiui, šį HTML:

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

Ir šis CSS:

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

Tai yra rezultatas, jei naudojate Sass kaip CSS kompiliatorių:

Dabar HTML bloke, jei norite perkelti su klase tamsi tema to viduje raginimas veikti, tai sulaužytų parinkiklį (sass režimu). Tačiau persijungus į įprastą CSS (ty be CSS išankstinio procesoriaus), stiliai veiks ir toliau.

Taip yra dėl to, kad :yra() veikia po gaubtu. Taigi aukščiau pateiktas įdėtas CSS kompiliuojamas į šį paprastą CSS:

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

Tai nurodo a .Antraštė kad yra abiejų palikuonis .tamsi tema ir .raginimas veikti. Tačiau jų eiliškumas iš tikrųjų neturi reikšmės. Tol, kol .Antraštė yra palikuonis .raginimas veikti ir .tamsi tema, jis veikia bet kuria tvarka.

Tai kraštutinis atvejis, o ne tai, su kuo dažnai susidursite. Tačiau suprasdamas :yra() Pagrindinės selektorių funkcijos gali padėti įsisavinti, kaip įdėjimas veikia CSS. Tai taip pat daro CSS derinimas daug lengviau.

Sužinokite, kaip naudoti „Sass“ programoje „React“.

Kadangi „Sass“ kompiliuoja į CSS, galite jį naudoti praktiškai su bet kokia vartotojo sąsaja. CSS pirminį procesorių galite įdiegti Vue, Preact, Svelte ir, žinoma, React projektuose. „Sass“ sąrankos procesas visoms šioms sistemoms taip pat yra gana paprastas.

Didžiausias „Sass“ naudojimo „React“ pranašumas yra tas, kad jis leidžia rašyti švarius, pakartotinai naudojamus stilius naudojant kintamuosius ir derinius. Kadangi esate „React“ kūrėjas, žinodami, kaip naudoti „Sass“, galėsite parašyti švaresnį, efektyvesnį kodą ir apskritai tapsite geresniu kūrėju.