CSS (Cascading Style Sheets) variabelen zijn vooraf gedefinieerde waarden die je herhaaldelijk in een document kunt gebruiken. Ze worden ook wel aangeduid als ‘custom properties’. Je kunt deze variabelen overal ter wereld gebruiken, afhankelijk van hoe je ze verklaart.
Hier is hoe je een CSS-variabele kunt gebruiken:
STAP 1: Declareer eerst de variabele.
CSS-variabelen worden gedeclareerd binnen een CSS-selector. Bijvoorbeeld:
```
:root {
—main-color: #ff6a00;
}
```
In dit voorbeeld is `—main-color` een naam die je voor de variabele hebt gekozen en `#ff6a00` is de waarde van de variabele.
STAP 2: Gebruik de variabele waar nodig.
Gebruik de `var()` functie om de waarde van de variabele te krijgen. Hier is hoe het eruit zou kunnen zien:
```
body {
background-color: var(—main-color);
}
```
In dit voorbeeld hebben we de variabele `—main-color` gebruikt als waarde voor de `background-color`-eigenschap.
Zoals je kunt zien, zorgen CSS-variabelen voor een gemakkelijke en flexibele manier om waarden doorheen je stylesheets te manipuleren. Als je bijvoorbeeld wilt dat de belangrijkste themakleur van je website verandert, zou je maar één keer een waarde hoeven te veranderen (dat wil zeggen, de waarde van de variabele `—main-color`).
