Atšķirības starp vietējo CSS un Sass ligzdošanu

Kopš tā palaišanas CSS ir stingri atteicies atbalstīt ligzdošanas atlasītāju sintaksi. Alternatīva vienmēr ir bijusi izmantot CSS priekšapstrādātāju, piemēram, Sass. Taču šodien ligzdošana oficiāli ir daļa no vietējās CSS. Varat izmēģināt šo funkciju tieši mūsdienu pārlūkprogrammās.

Ja migrējat no Sass, jums būs jāņem vērā visas atšķirības starp vietējo ligzdošanu un Sass ligzdošanu. Ir dažas galvenās atšķirības starp abām ligzdošanas funkcijām, un to apzināšana ir ļoti svarīga, ja veicat pāreju.

Vietējā CSS elementu atlasītājiem ir jāizmanto "&".

CSS ligzdošana joprojām ir specifikācijas melnraksts ar atšķirīgu pārlūkprogrammas atbalstu. Noteikti pārbaudiet tādas vietnes kā caniuse.com lai iegūtu jaunāko informāciju.

Šeit ir piemērs ligzdošanas veidam, ko jūs redzētu programmā Sass, izmantojot SCSS sintaksi:

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

Šis CSS bloks norāda, ka jebkurš nesakārtots saraksts elementā ar a nav klase tiek izlīdzināta kā elastīga kolonna, viens no veidiem HTML elementu izkārtošana lapā. Turklāt viss enkura saites teksts elementos ar a nav klasei jābūt melnai.

Tagad vietējā CSS šāda veida ligzdošana būtu nederīga. Lai tas darbotos, pirms ligzdotajiem elementiem ir jāiekļauj simbols & (&), piemēram:

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

Agrīnā CSS ligzdošanas versija neļāva ligzdot tipu atlasītājus. Nesen veiktās izmaiņas nozīmē, ka jums vairs nav jāizmanto “&”, taču vecākas Chrome un Safari versijas, iespējams, vēl neatbalsta šo atjaunināto sintaksi.

Tagad, ja izmantojāt atlasītāju, kas sākas ar simbolu (piem., klases atlasītāju) uz atlasīt konkrētu lapas daļu, varat izlaist & zīmi. Tātad šī sintakse darbotos gan vietējā CSS, gan Sass:

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

Jūs nevarat izveidot jaunu atlasītāju, izmantojot “&” vietējā CSS

Viena no Sass funkcijām, kas jums, iespējams, patīk, ir iespēja darīt kaut ko līdzīgu:

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

Šis Sass kods tiek kompilēts šādā neapstrādātā CSS:

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

Vietējā CSS nevar izveidot jaunu atlasītāju, izmantojot taustiņu "&". Sass kompilators aizstāj "&" ar vecākelementu (piem., .nav), bet vietējais CSS apstrādās "&" un daļu pēc tā kā divus atsevišķus atlasītājus. Rezultātā tas mēģinās izveidot savienojumu atlasītāju, kas nedos tādu pašu rezultātu.

Tomēr šis piemērs darbosies vietējā CSS:

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

Tas darbojas, jo pirmais atlasītājs ir tāds pats kā nav.nav-list vienkāršā CSS, un otrais ir tāds pats kā nav.nav-link. Atstarpes pievienošana starp "&" un atlasītāju būtu līdzvērtīga rakstīšanai nav .nav-list.

Vietējā CSS, ja izmantojat simbolu & šādi:

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

Tas ir tas pats, kas rakstīt šo:

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

Tas jums varētu būt pārsteigums, ņemot vērā, ka gan __nav-list un __nav-link atrodas iekšpusē .nav atlasītājs. Bet simbols & faktiski novieto ligzdotos elementus vecākelementa priekšā.

Specifiskums var būt atšķirīgs

Vēl viena lieta, kas jāņem vērā, ir ietekme uz specifiku, kas nenotiek Sass, bet gan vietējā CSS ligzdošanas laikā.

Tātad pieņemsim, ka jums ir a un an elements. Izmantojot šādu CSS, an jebkurā no šiem elementiem izmantos serif fontu:

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

Iepriekš minētā Sass koda apkopotā versija ir šāda:

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

Taču viena un tā pati ligzdošanas sintakse vietējā CSS sniegs atšķirīgu rezultātu, kas faktiski ir tāds pats kā:

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

The ir () atlasītājs apstrādā specifiskuma noteikumus nedaudz atšķirīgi no Sass ligzdošanas. Būtībā specifika:ir () tiek automātiski jaunināts uz visprecīzāko vienumu sniegto argumentu sarakstā.

Elementu secība var mainīt atlasīto elementu

Ligzdošana vietējā CSS var pilnībā mainīt to, ko atlasītājs patiesībā nozīmē (t.i., atlasa pilnīgi citu elementu).

Apsveriet, piemēram, šādu HTML:

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

Un šāds CSS:

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

Šis ir rezultāts, ja izmantojat Sass kā CSS kompilatoru:

Tagad HTML blokā, ja vēlaties pārvietot ar klasi tumšā tēma iekšpusē no aicinājums uz darbību, tas sabojātu selektoru (Sass režīmā). Bet, pārejot uz parasto CSS (t.i., bez CSS priekšapstrādātāja), stili turpinās darboties.

Tas ir tāpēc, ka :is() darbojas zem pārsega. Tātad iepriekš ligzdotais CSS tiek apkopots šādā vienkāršajā CSS:

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

Tas norāda a .virsraksts tas ir abu pēcnācējs .tumšā tēma un .aicinājums uz darbību. Bet to secībai nav īsti nozīmes. Kamēr vien .virsraksts ir pēcnācējs .aicinājums uz darbību un .tumšā tēma, tas darbojas jebkurā secībā.

Šis ir ārkārtējs gadījums, un tas nav nekas tāds, ar ko jūs tik bieži saskaraties. Bet saprotot :is() atlasītāja pamatā esošā funkcionalitāte var palīdzēt jums apgūt ligzdošanas darbību CSS. Tas arī padara CSS atkļūdošana daudz vieglāk.

Uzziniet, kā lietot Sass programmā React

Tā kā Sass kompilē CSS, varat to izmantot praktiski ar jebkuru lietotāja interfeisa sistēmu. Varat instalēt CSS priekšapstrādātāju Vue, Preact, Svelte un, protams, React projektos. Arī Sass iestatīšanas process visām šīm sistēmām ir diezgan vienkāršs.

Lielākā Sass izmantošanas priekšrocība programmā React ir tā, ka tas ļauj rakstīt tīrus, atkārtoti lietojamus stilus, izmantojot mainīgos un miksus. Kā React izstrādātājam zināšanas, kā lietot Sass, palīdzēs rakstīt tīrāku, efektīvāku kodu un kopumā padarīs jūs par labāku izstrādātāju.