CSS-variabelen gebruiken

Vaak is het mogelijk om keuzes op een hoog niveau te definiëren, of te wel op een element dat in de html-strucuur eerder aangemaakt is. Als je in de praktijk merkt dat je een bepaalde stijlkeuze vaker moet definiëren is het altijd goed om te kijken of dit op een hoger gelegen element kan. Dit bespaart werk en verkleint de kans op fouten.

Variabele gebruiken binnen een andere variabele

De knoppen binnen het "button-base"-bestand maken bijvoorbeeld gebruik van de accentkleur als deze binnen het "application-base"-bestand gedefinieerd staat.

Het onderstaande voorbeeld geeft weer hoe een variabele als waarde van een andere variabele gezet kan worden.

CSS-voorbeeld:

:root {
  --button-base-background-color: var(--application-base-accent-color);
}

Als de variabele niet altijd beschikbaar is, is het goed om een "fallback" mee te geven. Dan kan de applicatie daarop terugvallen mocht de ingevulde variabele niet gevuld of toegevoegd zijn. Dit kan alles zijn wat een CSS-variabele normaal als waarde kan accepteren. Bijvoobeeld een kleurcode, voor gedefinieerde kleur of een andere variabele. Voeg een komma toe tussen de twee mogelijke waardes binnen de variabele.

CSS-voorbeeld met kleurcode als fallback:

:root {
  --button-base-background-color: var(--application-base-accent-color, #000);
}

CSS-voorbeeld met vooraf gedefinieerde kleur als fallback:

:root {
  --button-base-background-color: var(--application-base-accent-color, black);
}

CSS-voorbeeld met variabele als fallback:

:root {
  --button-base-background-color: var(--application-base-accent-color, var(--application-base-color));
}