De verschillen tussen native CSS en Sass-nesting
Sinds de introductie heeft CSS hardnekkig geweigerd om een syntax voor het nesten van selectors te ondersteunen. Het alternatief is altijd geweest om een CSS preprocessor zoals Sass te gebruiken. Maar vandaag is het nesten officieel onderdeel van native CSS. Je kunt deze functie direct uitproberen in moderne browsers.
Bij de overgang van Sass naar native CSS is het essentieel om rekening te houden met de verschillen in nestingconventies die door elke syntaxis worden gebruikt. Deze verschillen kunnen een aanzienlijke invloed hebben op je codestructuur en algemene stijl, dus is het noodzakelijk dat je vertrouwd raakt met deze verschillen voordat je overstapt.
Je moet “&” gebruiken met elementselectors in native CSS
CSS-nesting is nog steeds een ontwerpspecificatie, met wisselende browserondersteuning. Zorg ervoor dat je sites zoals caniuse.com controleert voor actuele informatie.
Hier is een demonstratie van het soort geneste structuur dat kan worden gebruikt in Sass met behulp van de SCSS-syntaxis:
.nav {
ul { display: flex; }
a { color: black; }
}
Het gegeven codefragment heeft betrekking op de stylingregels voor de navigatiebalk van een HTML-document. Specifiek wordt voorgeschreven dat geordende lijsten in een element met de klasse “nav” flexibel (in kolommen) worden weergegeven. Bovendien wordt voorgeschreven dat tekst met hyperlinks in dergelijke elementen zwart moet zijn.
In native CSS wordt de bovengenoemde vorm van nesten onacceptabel geacht. Om deze structuur effectief te laten werken, moet er een ampersand symbool (&) worden toegevoegd voorafgaand aan elk ingesloten element, zoals hieronder wordt geïllustreerd:
.nav {
& ul { display: flex; }
& a { color: black; }
}
Vóór een recente aanpassing stond de eerste versie van Cascading Style Sheets (CSS) het omsluiten van type selectors niet toe. Met de laatste aanpassing is het nu echter mogelijk om het gebruik van het symbool “&” achterwege te laten bij het omsluiten van type selectors. Gebruikers moeten er echter rekening mee houden dat oudere versies van webbrowsers zoals Google Chrome en Apple Safari nog steeds niet compatibel zijn met deze herziene methode.
In gevallen waar een selector begint met een symbool, zoals een class selector, is het toegestaan om de ampersand weg te laten bij het schrijven van CSS of Sass code. Dit betekent dat de gegeven syntaxis correct zal werken in zowel conventioneel CSS als Sass.
.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}
Je kunt geen nieuwe selector maken met “&” in native CSS
Een van de aantrekkelijke aspecten van Sass die je misschien waardeert, is het vermogen om het genereren van code te vergemakkelijken met constructies zoals de hieronder getoonde:
.nav {
&-list { display: flex; }
&-link { color: black; }
}
De bovengenoemde Sass-code levert na compilatie de volgende onverwerkte CSS-uitvoer op:
.nav-list {
display: flex;
}
.nav-link {
color: black;
}
In standaard CSS wordt het gebruik van het “&” symbool voor het maken van een nieuwe selector niet ondersteund. Echter, wanneer Sass wordt gebruikt, vervangt de compiler effectief de “&” door het omsluitende element, zoals “.nav”, waardoor de vorming van een onjuiste samengestelde selector wordt voorkomen die andere resultaten zou opleveren dan het bedoelde resultaat.
Dit voorbeeld van code zou correct moeten werken met behulp van native CSS-syntaxis:
.nav {
&.nav-list { display: flex; }
&.nav-link { color: black; }
}
De gegeven code werkt dankzij de overeenkomst tussen de selectors die erin worden gebruikt. De eerste selector komt overeen met elementen met de klassenaam “nav-list” of “nav-link”, terwijl de tweede selector zich specifiek richt op elementen met de klassenaam “nav-link”. Het plaatsen van een spatie tussen het “&” symbool en de daaropvolgende selector (bijv. “nav .nav-list”) zou resulteren in een ongeldige syntaxisfout, omdat het een nieuwe groep zou creëren die bestaat uit zowel de klassen “nav” als “.nav-list”, in plaats van elementen te targeten die beide klassen bezitten.
In CSS native resulteert het gebruik van een ampersand-symbool op de hieronder getoonde manier in een semantische fout:
.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;
}
Het is misschien onverwacht omdat zowel de en elementen binnen de .nav selector staan. De ampersand ( & ) positioneert de geneste elementen echter effectief vóór hun bovenliggende element.
Specificiteit kan anders zijn
Het is de moeite waard om het effect op precisie te noemen dat optreedt met de geneste syntaxis van Sass, in tegenstelling tot zijn tegenhanger in standaard CSS, die aandacht verdient.
Ervan uitgaande dat iemand zowel een hoofdelement als een artikelelement in zijn HTML-structuur heeft, zou het gebruik van de gegeven CSS-styling ertoe leiden dat elke h2-tag in die respectieve elementen wordt weergegeven met een schreeflettertype.
#main, article {
h2 {
font-family: serif;
}
}
De resulterende CSS die wordt gegenereerd uit de bovengenoemde Sass-code ziet er als volgt uit:
#main h2,
article h2 {
font-family: serif;
}
In tegenstelling tot het gebruik van geneste selectors binnen native CSS, zal het gebruik van een gelijkwaardige structuur door middel van dezelfde syntaxis een vergelijkbaar resultaat opleveren.
:is(#main, article) h2 {
font-family: serif;
}
De is() selector in LESS verschilt enigszins van zijn tegenhanger in Sass met betrekking tot het omgaan met specificiteitsregels. Met name wanneer :is() wordt gebruikt, wordt de specificiteit van de selector automatisch verhoogd tot die van het meest specifieke element binnen de lijst met opgegeven parameters.
De volgorde van elementen kan het geselecteerde element veranderen
Het nesten binnen native CSS kan de bedoelde betekenis van een gegeven selector veranderen, waardoor uiteindelijk een heel ander element wordt geselecteerd.
Neem bijvoorbeeld de volgende HTML:
<div class="dark-theme">
<div class="call-to-action">
<div class="heading"> Hello </div>
</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;
}
}
Het gebruik van Sass als CSS preprocessor levert het volgende resultaat op:
In een HTML-context, als het element met de classificatie “dark-theme” wordt ingevoegd in de parent container met de classificatie “call-to-action”, zullen de resulterende selectiecriteria die worden gebruikt door Sass (een CSS preprocessor) disfunctioneel worden. Echter, onder conventionele CSS-conventie (d.w.z. zonder gebruik te maken van CSS-preprocessors), zullen de bijbehorende styling-eigenschappen onaangetast en effectief blijven.
Het gedrag komt voort uit de manier waarop de :is() pseudoklasse intern werkt, wat resulteert in het genereren van de onopgesmukte CSS-weergave die hieronder wordt weergegeven:
.dark-theme :is(.call-to-action .heading) {
/* CSS code */
}
De koptekst in kwestie is een afstammeling van zowel het .dark-theme element als het .call-to-action element, maar hun specifieke volgorde heeft geen invloed op de functionaliteit. Zolang de koptekst een afstammeling is van beide elementen, heeft het feit of ze in een bepaalde volgorde staan geen invloed op het resultaat.
In dit specifieke scenario komt het minder vaak voor, maar als je het intrinsieke mechanisme van de :is() selector begrijpt, kun je je vaardigheid met betrekking tot geneste elementen in CSS vergroten. Bovendien maakt deze kennis het eenvoudiger om problemen met CSS op een effectieve manier op te lossen.
Leer hoe je Sass in React kunt gebruiken
Als gevolg van zijn vermogen om te compileren naar CSS, is Sass compatibel met een uitgebreide reeks UI-frameworks. De installatie ervan in verschillende platforms, waaronder Vue, Preact, Svelte en React, verloopt moeiteloos en biedt een naadloze integratie-ervaring in verschillende technologieën.
Het gebruik van Sass binnen de context van React biedt verschillende voordelen, met name de mogelijkheid om goed georganiseerde en herbruikbare styling te maken door variabelen en mixins te implementeren. Bekwaamheid in deze technologie kan iemands vermogen om verfijnde en vindingrijke code te produceren aanzienlijk vergroten, wat uiteindelijk professionele groei als React-ontwikkelaar bevordert.