Forskjellene mellom Native CSS og Sass Nesting

Siden den ble lansert, har CSS hardnakket nektet å støtte en syntaks for nestevelgere. Alternativet har alltid vært å bruke en CSS-forprosessor som Sass. Men i dag er hekking offisielt en del av innfødt CSS. Du kan prøve denne funksjonen direkte i moderne nettlesere.

Hvis du migrerer fra Sass, må du ta hensyn til eventuelle forskjeller mellom innfødt hekking og Sass-hekking. Det er noen viktige forskjeller mellom begge hekkefunksjonene, og å være klar over dem er avgjørende hvis du bytter.

Du må bruke "&" med elementvelgere i Native CSS

CSS Nesting er fortsatt et utkast til spesifikasjon, med varierende nettleserstøtte. Sørg for å sjekke nettsteder som caniuse.com for oppdatert informasjon.

Her er et eksempel på typen nesting du vil se i Sass, ved å bruke SCSS-syntaksen:

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

Denne CSS-blokken spesifiserer at enhver uordnet liste i et element med en

nav klasse justeres som en flex kolonne, en måte å legge ut HTML-elementer på siden. I tillegg er all ankerlenketekst inne i elementer med en nav klasse skal være svart.

Nå, i innfødt CSS, ville den typen hekking være ugyldig. For å få det til å fungere, må du inkludere og-tegnet (&) foran de nestede elementene, slik:

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

Den tidlige versjonen av CSS-nesting tillot ikke nesting av typevelgere. En nylig endring betyr at du ikke lenger trenger å bruke «&», men eldre versjoner av Chrome og Safari støtter kanskje ikke denne oppdaterte syntaksen ennå.

Hvis du nå brukte en velger som starter med et symbol (f.eks. klassevelger) til målrette mot en bestemt del av siden, kan du utelate og-tegnet. Så følgende syntaks vil fungere i både native CSS og Sass:

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

Du kan ikke opprette en ny velger ved å bruke "&" i Native CSS

En av funksjonene du sannsynligvis elsker med Sass er muligheten til å gjøre noe som dette:

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

Denne Sass-koden kompilerer til følgende rå CSS:

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

I innebygd CSS kan du ikke opprette en ny velger ved å bruke "&". Sass-kompilatoren erstatter "&" med det overordnede elementet (f.eks. .nav), men innebygd CSS vil behandle "&" og delen etter den som to separate velgere. Som et resultat vil den prøve å lage en sammensatt velger, som ikke vil gi det samme resultatet.

Dette eksemplet vil imidlertid fungere i innebygd CSS:

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

Dette fungerer fordi den første velgeren er den samme som nav.nav-liste i vanlig CSS, og den andre er den samme som nav.nav-link. Å legge til et mellomrom mellom "&" og velgeren vil tilsvare å skrive nav .nav-liste.

I opprinnelig CSS, hvis du bruker og-tegnet slik:

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

Det er det samme som å skrive dette:

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

Dette kan komme som en overraskelse for deg, med tanke på at både __nav-liste og __nav-link er inne i .nav velger. Men og-tegnet plasserer faktisk de nestede elementene foran det overordnede elementet.

Spesifisitet kan være forskjellig

En annen ting å merke seg er innvirkningen på spesifisitet som ikke skjer i Sass, men som skjer i native CSS-nesting.

Så la oss si at du har en og en element. Med følgende CSS, en i ett av disse elementene vil bruke en serif-font:

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

Den kompilerte versjonen av Sass-koden ovenfor er som følger:

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

Men den samme neste-syntaksen i innebygd CSS vil gi et annet resultat, faktisk det samme som:

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

De er() velgeren håndterer spesifisitetsregler litt annerledes enn Sass-hekking. I utgangspunktet spesifisiteten til:er() blir automatisk oppgradert til det mest spesifikke elementet i listen over argumenter.

Rekkefølgen av elementer kan endre det valgte elementet

Nesting i innebygd CSS kan fullstendig endre hva velgeren faktisk betyr (dvs. velger et helt annet element).

Tenk på følgende HTML, for eksempel:

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

Og følgende CSS:

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

Dette er resultatet hvis du bruker Sass som CSS-kompilatoren:

Nå i HTML-blokken, hvis du skulle flytte med klassen til mørkt tema inni det av oppfordring til handling, ville det bryte velgeren (i Sass-modus). Men når du bytter til vanlig CSS (dvs. ingen CSS-forprosessor), vil stilene fortsette å fungere.

Dette er på grunn av måten som :er() fungerer under panseret. Så den nestede CSS-en ovenfor kompileres til følgende vanlige CSS:

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

Dette spesifiserer en .overskrift som er en etterkommer av begge .mørkt tema og .oppfordring til handling. Men rekkefølgen på disse spiller ingen rolle. Så lenge .overskrift er etterkommer av .oppfordring til handling og .mørkt tema, det fungerer i begge rekkefølgen.

Dette er en kantsak og ikke noe du vil støte på så ofte. Men å forstå :er() selectors underliggende funksjonalitet kan hjelpe deg med å mestre hvordan nesting fungerer i CSS. Dette gjør også feilsøking av CSS mye enklere.

Lær hvordan du bruker Sass i React

Fordi Sass kompilerer til CSS, kan du bruke det med praktisk talt alle UI-rammeverk. Du kan installere CSS-forprosessoren i Vue-, Preact-, Svelte- og – selvfølgelig – React-prosjekter. Oppsettprosessen for Sass for alle disse rammene er også ganske grei.

Den største fordelen med å bruke Sass i React er at den lar deg skrive rene, gjenbrukbare stiler ved å bruke variabler og mixins. Som React-utvikler vil det å vite hvordan du bruker Sass hjelpe deg med å skrive renere, mer effektiv kode og gjøre deg til en bedre utvikler totalt sett.