CSS-variabelen, ook wel aangepaste eigenschappen genoemd, helpen u om herhaling in uw stylesheets te minimaliseren. Dit helpt u op zijn beurt tijd en moeite te besparen bij het aanbrengen van wijzigingen in uw ontwerp. U kunt er ook zeker van zijn dat u geen waarden mist die u moet bijwerken.
Toegang tot de DOM stelt u in staat om variabelen te creëren, op te slaan en opnieuw te gebruiken in uw stylesheet.
CSS-variabelen definiëren en gebruiken
Om uw stijlpagina's beter geordend, onderhoudbaar en herbruikbaar te maken, kunt u CSS-variabelen gebruiken in elke eigenschap die een waarde accepteert.
Neem het volgende voorbeeld van een HTML-bestand en een CSS-bestand dat geen CSS-variabelen gebruikt.
HTML:
html>
<htmllang="en">
<hoofd>
<titel>CSS-variabelen - knopvariatiestitel>
<koppelingrel="stijlblad"href="Variabelen.css" />
hoofd>
<lichaam>
<div>
<h1>CSS-variabelen
h1>
<div>
CSS:
.btn {
opvulling: 1rem 1.5rem;
achtergrond: transparant;
lettergewicht: 700;
kleur rood;
}
Zo zou uw pagina eruit moeten zien:
De .btn klasse die in het bovenstaande stijlblad wordt gebruikt, is niet dynamisch en zorgt ervoor dat u een afzonderlijke klasse maakt om individuele knoppen aan te passen. Het maken van prachtige websites vereist dat je dynamisch bent met je front-end styling. Door knoppen op deze manier te implementeren, wordt die taak gewoon lastig om te bereiken.
Zoals de meeste programmeertalen, moet u CSS-variabelen initialiseren en vervangen.
Om een CSS-variabele te initialiseren, voegt u dubbele koppeltekens toe aan de naam van de variabele:
:wortel{
/*CSS-variabele*/
--variabele_naam: waarde;
}
U kunt een variabele overal initialiseren, maar houd er rekening mee dat u die variabele alleen binnen de geïnitialiseerde selector kunt gebruiken. Daarom worden CSS-variabelen conventioneel geïnitialiseerd in de root-selector. Dit richt zich op het element op het hoogste niveau van de DOM en zorgt ervoor dat de variabelen op wereldschaal toegankelijk zijn voor het volledige HTML-document.
Om de variabele in uw CSS-stijl te vervangen, gebruikt u de var() eigendom:
:wortel {
/*CSS-variabele*/
--primair: #900c3f;
--ondergeschikt: #ff5733;
}.btn {
opvulling: 1rem 1.5rem;
achtergrond: transparant;
lettergewicht: 700;
kleur: var(--primair);
Achtergrond kleur: var(--ondergeschikt);
}
.sub-primair {
kleur: var(--ondergeschikt);
Achtergrond kleur: var(--primair);
}
De root selector bevat twee variabelen: --primair En --ondergeschikt. Beide variabelen worden vervolgens gesubstitueerd in de .btn klasse als respectievelijk kleur en achtergrondkleur.
Met behulp van de variabelen kun je individuele elementen veel gemakkelijker stylen. Door variabelen opnieuw te gebruiken, kunt u snel een waarde één keer wijzigen om deze in elke instantie bij te werken.
De var() eigenschap kan ook een tweede argument hebben. Dit argument fungeert als een terugvalwaarde voor het eerste argument in een situatie waarin het eerste niet is gedefinieerd of ongeldig is.
Bijvoorbeeld:
:wortel {
--primair: #900c3f;
--ondergeschikt: #ff5733;
}
.btn {
opvulling: 1rem 1.5rem;
achtergrond: transparant;
lettergewicht: 700;
kleur: var(--primair, blauw);
}
Vervang in dit voorbeeld de --primair variabel in kleur stijl. Als deze waarde om wat voor reden dan ook niet werkt, gebruikt de stylesheet de tweede waarde als reserve. U kunt ook een andere CSS-variabele gebruiken als terugvalwaarde.
CSS-variabelen manipuleren en overschrijven met JavaScript
Het manipuleren van CSS-variabelen met behulp van JavaScript kan een krachtige manier zijn om het uiterlijk van uw website in een handomdraai te veranderen. Met JavaScript kunt u de waarden van deze variabelen bijwerken en de wijzigingen op uw site zien.
Het is belangrijk op te merken dat de wijzigingen die met JavaScript zijn aangebracht alleen van toepassing zijn op de huidige sessie. U moet de oorspronkelijke bron bijwerken of slaat de nieuwe waarde op de client op, zoals in een cookie, om de wijzigingen voort te zetten.
Hier is een voorbeeld van het gebruik van JavaScript om de waarde van een CSS-variabele bij te werken.
HTML:
html>
<htmllang="en">
<hoofd>
<titel>CSS-variabelen - knopvariatiestitel>
<koppelingrel="stijlblad"href="Variabelen.css" />
<script>
functieverander kleur() {
// Haal het element op waarop u de variabele wilt wijzigen
const mijnElement = document.querySelector(":wortel");// Haal de huidige waarde van de variabele op
laten currentValue = getComputedStyle (mijnElement).getPropertyValue(
"--ondergeschikt"
);
// Set de nieuwwaardevoor de variabel
mijnElement.stijl.setProperty("--ondergeschikt", "#DAF7A6");
}
script>
hoofd>
<lichaam>
<div>
<h1>CSS-variabelenh1>
<div>
CSS:
:wortel {
--primair: #900c3f;
--ondergeschikt: #ff5733;
}.btn {
opvulling: 1rem 1.5rem;
achtergrond: transparant;
lettergewicht: 700;
}
.sub-primair {
kleur: var(--primair);
Achtergrond kleur: var(--ondergeschikt);
}
In deze JavaScript-code, de verander kleur() functie werkt de kleur van de eerste knop bij wanneer de gebruiker erop klikt.
Gebruik makend van DOM-traversal-methoden, hebt u toegang tot de klassen of selectors die in uw HTML-document zijn toegepast en kunt u de waarden manipuleren.
Voordat u op de knop klikt:
Na het klikken op de knop:
U kunt ook JavaScript gebruiken om nieuwe CSS-variabelen te maken of ze helemaal te verwijderen.
Bijvoorbeeld:
// Creëren A nieuwvariabel
document.documentElement.style.setProperty('--nieuwe kleur', 'blauw');
// Verwijder een variabele
document.documentElement.style.removeProperty('--nieuwe kleur');
CSS-variabelen gebruiken met preprocessors
Het gebruik van variabelen binnen frontend-technologie werd in eerste instantie bereikt met CSS-preprocessors zoals SASS, MINDER en Stylus.
Het doel van CSS-preprocessors is om code te ontwikkelen die de fundamentele mogelijkheden van standaard CSS uitbreidt. Laat die code vervolgens compileren in standaard CSS zodat de browser het kan begrijpen, net zoals hoe TypeScript werkt met JavaScript.
Met de ontwikkeling van CSS-variabelen zijn preprocessors niet langer zo belangrijk, maar ze kunnen nog steeds enig nut bieden als ze worden gecombineerd met CSS-variabelen in uw project.
U kunt een SASS-variabele definiëren $ hoofdkleur en gebruik het om de waarde van een CSS-variabele in te stellen. Gebruik vervolgens de CSS-variabele in een gewone stijlklasse.
U kunt ook SASS-functies gebruiken om de waarden van CSS-variabelen te manipuleren.
Bijvoorbeeld:
:wortel {
--primair: $hoofdkleur;
--secundair: verlichten(var(--primair), 20%);
}
.btn {
kleur: var(--primair);
Achtergrond kleur: var(--ondergeschikt);
}
Hier de SASS-functie verlichten() manipuleert de waarde van --primair een waarde voor krijgen --ondergeschikt.
Merk op dat SASS-variabelen niet toegankelijk zijn voor JavaScript. Dus als u de waarden van uw variabelen tijdens runtime moet manipuleren, moet u CSS-variabelen gebruiken.
Door CSS-variabelen en preprocessors samen te gebruiken, kunt u profiteren van beide voordelen, zoals het gebruik van krachtige preprocessorfuncties zoals loops en functies en CSS-variabelen zoals CSS trapsgewijze.
Tips voor het gebruik van CSS-variabelen bij webontwikkeling
Hier zijn een paar belangrijke tips om op te merken die u zullen helpen om CSS-variabelen beter te gebruiken.
Begin met een duidelijke naamgevingsconventie
Kies een naamgevingsconventie voor uw variabelen waardoor ze gemakkelijk te begrijpen en te gebruiken zijn. Gebruik bijvoorbeeld een voorvoegsel zoals --kleur- voor kleurvariabelen of --spatiëring- voor afstandsvariabelen.
Gebruik variabelen in mediaquery's om het gemakkelijk te maken om uw ontwerp aan te passen aan verschillende schermformaten.
Profiteer van de trapsgewijze aard van CSS
Onthoud dat CSS-variabelen cascade zijn, wat betekent dat als u een variabele op een bovenliggend element instelt, dit van invloed is op alle onderliggende elementen.
Gebruik CSS-variabelen met de nodige voorzichtigheid
Het gebruik van te veel CSS-variabelen kan verwarring veroorzaken, dus gebruik ze met de nodige voorzichtigheid, en alleen als het zinvol is en de onderhoudbaarheid van uw code verbetert.
Test uw variabelen
CSS-variabelen zijn een unieke manier om duidelijke en onderhoudbare code binnen uw stylesheet te schrijven.
Het is belangrijk op te merken dat ze nog steeds niet volledig worden ondersteund door alle browsers. Daarom moet u uw variabelen testen op browsercompatibiliteit om er zeker van te zijn dat ze werken zoals verwacht en dat eventuele fallback-waarden werken zoals u verwacht.
