De verschillen tussen native CSS en Sass Nesting

Sinds de lancering heeft CSS hardnekkig geweigerd een syntaxis voor het nesten van selectors te ondersteunen. Het alternatief is altijd geweest om een ​​CSS-preprocessor zoals Sass te gebruiken. Maar tegenwoordig is nesten officieel onderdeel van native CSS. U kunt deze functie rechtstreeks in moderne browsers uitproberen.

Als u vanuit Sass migreert, moet u rekening houden met eventuele verschillen tussen native nesting en Sass-nesting. Er zijn enkele belangrijke verschillen tussen beide nestfuncties, en het is van cruciaal belang dat u zich hiervan bewust bent als u de overstap maakt.

U moet "&" gebruiken met elementkiezers in native CSS

CSS Nesting is nog steeds een conceptspecificatie, met wisselende browserondersteuning. Zorg ervoor dat u sites als caniuse.com voor actuele informatie.

Hier is een voorbeeld van het type nesting dat je in Sass zou zien, met behulp van de SCSS-syntaxis:

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

Dit CSS-blok specificeert dat elke ongeordende lijst binnen een element met a navigatie klasse wordt uitgelijnd als een flexkolom, op één manier HTML-elementen op de pagina opmaken. Bovendien wordt alle ankerlinktekst binnen elementen met een navigatie klasse moet zwart zijn.

In native CSS zou dit soort nesting ongeldig zijn. Om het te laten werken, moet je het ampersand-symbool (&) vóór de geneste elementen plaatsen, zoals zo:

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

De vroege versie van CSS-nesten stond het nesten van typekiezers niet toe. Een recente wijziging betekent dat u "&" niet langer hoeft te gebruiken, maar oudere versies van Chrome en Safari ondersteunen deze bijgewerkte syntaxis mogelijk nog niet.

Als u nu een selector zou gebruiken die begint met een symbool (bijvoorbeeld een klassenselector). target een specifiek deel van de pagina, kunt u het ampersand weglaten. De volgende syntaxis zou dus werken in zowel native CSS als Sass:

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

U kunt geen nieuwe selector maken met '&' in native CSS

Een van de functies die je waarschijnlijk leuk vindt aan Sass is de mogelijkheid om zoiets als dit te doen:

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

Deze Sass-code compileert naar de volgende onbewerkte CSS:

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

In native CSS kunt u geen nieuwe selector maken met '&'. De Sass-compiler vervangt de "&" door het bovenliggende element (bijv. .nav), maar native CSS behandelt de "&" en het gedeelte erna als twee afzonderlijke selectors. Als gevolg hiervan zal het proberen een samengestelde selector te maken, wat niet hetzelfde resultaat zal opleveren.

Dit voorbeeld werkt echter in native CSS:

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

Dit werkt omdat de eerste selector dezelfde is als nav.nav-lijst in gewone CSS, en de tweede is hetzelfde als nav.nav-link. Het toevoegen van een spatie tussen de "&" en de selector zou hetzelfde zijn als schrijven nav .nav-lijst.

Als je in native CSS het ampersand als volgt gebruikt:

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

Het is hetzelfde als dit schrijven:

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

Dit komt misschien als een verrassing voor u, aangezien zowel de __nav-lijst En __nav-link zijn binnen de .nav keuzeschakelaar. Maar het ampersand plaatst de geneste elementen feitelijk vóór het bovenliggende element.

Specificiteit kan anders zijn

Een ander ding om op te merken is de impact op de specificiteit die niet gebeurt in Sass, maar wel gebeurt bij het nesten van native CSS.

Dus laten we zeggen dat je een en een element. Met de volgende CSS kan een in een van deze elementen wordt een schreeflettertype gebruikt:

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

De gecompileerde versie van de bovenstaande Sass-code is als volgt:

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

Maar dezelfde nesting-syntaxis in native CSS zal een ander resultaat opleveren, in feite hetzelfde als:

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

De is() selector verwerkt specificiteitsregels iets anders dan Sass-nesten. Kortom, de specificiteit van:is() wordt automatisch geüpgraded naar het meest specifieke item in de lijst met opgegeven argumenten.

De volgorde van de elementen kan het geselecteerde element veranderen

Nesten in native CSS kan volledig veranderen wat de selector feitelijk betekent (dat wil zeggen: selecteert een heel ander element).

Beschouw bijvoorbeeld de volgende HTML:

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

En de volgende CSS:

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

Dit is het resultaat als je Sass als CSS-compiler gebruikt:

Als u nu in het HTML-blok de met de klas van donker thema binnen dat van oproep tot actie, zou het de selector verbreken (in Sass-modus). Maar wanneer u overschakelt naar gewone CSS (dus geen CSS-preprocessor), blijven de stijlen werken.

Dit komt door de manier waarop de :is() werkt onder de motorkap. Dus de bovenstaande geneste CSS wordt gecompileerd in de volgende gewone CSS:

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

Dit specificeert een .kop dat is een afstammeling van beiden .donker-thema En .oproep tot actie. Maar de volgorde hiervan doet er eigenlijk niet toe. Zolang de .kop is de afstammeling van .oproep tot actie En .donker-thema, het werkt in beide volgordes.

Dit is een randgeval en niet iets dat je zo vaak tegenkomt. Maar het begrijpen van de :is() De onderliggende functionaliteit van de selector kan u helpen onder de knie te krijgen hoe nesten werkt in CSS. Dit maakt ook het debuggen van uw CSS veel makkelijker.

Leer hoe u Sass in React kunt gebruiken

Omdat Sass naar CSS compileert, kunt u het met vrijwel elk UI-framework gebruiken. U kunt de CSS-preprocessor installeren in Vue-, Preact-, Svelte- en uiteraard React-projecten. Het installatieproces voor Sass voor al deze frameworks is ook vrij eenvoudig.

Het grootste voordeel van het gebruik van Sass in React is dat je schone, herbruikbare stijlen kunt schrijven met variabelen en mixins. Als u als React-ontwikkelaar weet hoe u Sass moet gebruiken, kunt u schonere, efficiëntere code schrijven en wordt u in het algemeen een betere ontwikkelaar.