Variabelen in CSS

Een programmeertaal zonder variabelen is als een kar zonder paard. Het werkt allemaal goed, maar het is lastig om mee te werken. CSS is daarop geen uitzondering.

CSS is oorspronkelijk opgezet om snel allerlei instellingen in de DOM te doen voor de opmaak van een HTML-document. Later kwamen daar betrekkelijk eenvoudige animaties bij. Met JavaScript is een en ander goed te beheren in realtime. Het aanpassen van het uiterlijk van de website aan de wensen van de gebruiker is nog steeds lastig. In het verleden zijn daar al trucs voor bedacht, zoals het vervangen van het .css-bestand door een ander. Elders op deze site wordt uitgelegd hoe je dat doet.
Van style-sheet wisselen is echter statisch. In realtime de (thema-)kleuren van een site aanpassen is dynamisch, en dat vraagt een andere aanpak. Daarvoor is in CSS de variabele ontwikkeld.

Een variabele hoeft maar op één plaats te worden ingesteld en kan door JavaScript worden aangepast. Er wordt dan niet meer steeds dezelfde kleurinstelling gemaakt, meer er wordt verwezen naar een variabele. Als daar de waarde van wordt gewijzigd, wijzigt alles mee.

Een variabele maken
Een variabele maak je door een naam te declareren. Die begint altijd met twee streepjes (min-tekens), bijvoorbeeld:
--kleur1: #f00;
--kleur2: #0f0;
--kleur3: #00f;
In een variabele kan alles staan wat rechts van de dubbele punt staat in een CSS-regel.

De scope van een variabele
De scope (geldigheidsgebied) van een variabele wordt bepaald door de CSS-selector waarbinnen die is gedeclareerd. Als je een variabele wilt kunnen refereren vanuit het hele style-sheet moet je hem declareren in het blok html { … }. Duidelijker is om de pseudo-selector :root te gebruiken. De declaratie hierboven wordt dan:
:root {
  --kleur1: #f00;
  --kleur2: #0f0;
  --kleur3: #00f;
}

Refereren aan een variabele binnen CSS
Refereren aan een variabele binnen CSS doe je met de function var(), bijvoorbeeld:
:root {
  --kleur1: #f00;
  --kleur2: #0f0;
  --kleur3: #00f;
}
selector {
  color: var(--kleur1);
  background: var(--kleur3);
}

Refereren aan een CSS-variabele met JavaScript
Met JavaScript kun je de waarde van een CSS-variabele ophalen. Daarvoor zijn er de methodes getComputedStyle() en getPropertyValue(). In bovenstaande code haal je de waarde van --kleur1 op met:
var str = getComputedStyle(document.getElementById('…').
    getPropertyValue('--kleur1');>
N.B.: code moet op één regel staan.
De JS-variabele str bevat de waarde van de CSS-variabele --kleur1.

Om een CSS-variabele door JavaScript een waarde te geven gebruik je setProperty(), en wel als volgt:
var abcd = document.getElementById('…').
    style.setProperty('--kleur1', '#fff');
N.B.: code moet op één regel staan.
De JS-variabele abcd is undefined.
Er is nog een derde parameter mogelijk waarmee de prioriteit wordt ingesteld. Mogelijke waarden zijn: "important", undefined (zonder aanhalingstekens) en "". De laatste twee laatsten zijn default en betekenen hetzelfde.

Rekenen met CSS- variabelen
Het is ook mogelijk om met CSS-variabelen te rekenen. Daarvoor is er de function calc(), bijvoorbeeld:
width: calc(100% - 3em)

Met calc() kun je alleen optellen, aftrekken, vermenigvuldigen en delen (+ - * /).
De charme van calc() is dat je niet hoeft te letten op eenheden. Dat regelt calc() zelf. De calc()-functie is echter minder geschikt voor complexe berekeningen. Dat gaat beter met JavaScript.

Op het moment dat dit wordt geschreven (mei 2020) is calc() in alle grote browsers volledig geïmplementeerd.

Opmerking:
 
Het item Layoutaanpassingen met behulp van CSS-variabelen toont een voorbeeld van het gebruik van CSS-variabelen.