CSS-variabelen gebruiken: de complete tutorial

CSS-variabelen gebruiken: declareren, scope en JavaScript

CSS Custom Properties, beter bekend als CSS-variabelen, zijn een flinke stap vooruit voor frontend-developers. Ze brengen de kracht van variabelen naar CSS, en dat betekent minder herhaling, betere leesbaarheid en meer flexibiliteit.

Anders dan de variabelen van CSS-preprocessors maken CSS-variabelen bovendien deel uit van de DOM, en dat levert een hoop voordelen op. Verder werken ze in essentie zoals SASS- en LESS-variabelen. In deze tutorial laat ik je met voorbeelden zien hoe deze CSS3-module werkt.

Waarom CSS-variabelen gebruiken?

Er zijn heel wat redenen om variabelen in CSS te gebruiken. De overtuigendste: ze halen de herhaling uit je stylesheet.

De oude manier

css

#title {
    color: #ff0000;
}

.h1 {
    color: #ff0000;
}

De nieuwe manier

css

:root {
    --red: #ff0000; /* Déclaration d'une variable css */
}
#title {
    color: var(--red); /* Utilisation de la variable css */
}

.h1 {
    color: var(--red); /* Utilisation de la variable css */
}

Dat maakt je code niet alleen makkelijker te lezen, het geeft je ook meer speelruimte wanneer je die kleur wilt wijzigen.

Met SASS- en LESS-variabelen kan dat inderdaad al jaren. Toch hebben CSS-variabelen een paar voordelen.

Ze hoeven niet gecompileerd te worden om te werken, want ze zijn native in de browser. Je hebt dus geen enkele configuratie nodig om te beginnen, in tegenstelling tot SASS en LESS
Ze leven in de DOM, en dat opent een berg mogelijkheden die ik in deze tutorial doorneem.

Tijd om CSS-variabelen te leren kennen!

Je eerste CSS-variabele declareren

Om een variabele te declareren, bepaal je eerst in welke scope ze moet leven. Wil je haar overal beschikbaar hebben, zet haar dan gewoon in de pseudo-klasse :root. Die komt overeen met het rootelement van je documentboom, meestal de tag <html>.

Omdat variabelen overerfbaar zijn, is je variabele daarmee in je hele applicatie beschikbaar: al je DOM-elementen zijn immers afstammelingen van de tag <html>.

css

:root {
    --main-color: #00FF00; /* Déclaration d'une variable css */
}

Zoals je ziet declareer je een variabele net zoals je een CSS-eigenschap instelt. De naam moet alleen met twee streepjes beginnen.

Om een variabele uit te lezen gebruik je de functie var() en geef je de naam van de variabele als parameter mee.

css

#title {
  color: var(--main-color);
}

En daarmee krijgt je titel de kleur #00FF00.

Een lokale CSS-variabele declareren

Je kunt ook lokale variabelen maken, die alleen bereikbaar zijn voor het element waarop ze gedeclareerd zijn en voor de kinderen daarvan. Handig wanneer je weet dat een variabele maar in een of enkele specifieke delen van je applicatie gebruikt wordt.

Denk bijvoorbeeld aan een waarschuwingsvenster met een eigen kleur die nergens anders in de applicatie terugkomt. In dat geval is het slim om die kleur lokaal te declareren.

css

.alert {
  --alert-color: #ff0000;
}

De kinderen kunnen die variabele nu gebruiken:

css

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

Probeer je de variabele alert-color ergens anders in je applicatie te gebruiken, bijvoorbeeld in de navigatiebalk, dan werkt dat simpelweg niet. De browser negeert die CSS-regel gewoon.

Responsive werken met CSS-variabelen

Een groot voordeel van CSS-variabelen is dat ze toegang hebben tot de DOM. Bij LESS of SASS is dat niet zo: hun variabelen worden naar CSS gecompileerd en pas daarna door de browser gelezen

In de praktijk betekent dat dat je variabelen bijvoorbeeld kunt aanpassen aan de breedte van het scherm:

css

:root {
  --main-size: 16px ;
}
@media all and (max-width: 600px) {
  :root {
    --main-size : 12px ;
  }
}

En met die vier eenvoudige regels code heb je de hoofdlettergrootte in je hele applicatie aangepast zodra ze op een klein scherm wordt getoond. Best elegant, toch?

CSS-variabelen uitlezen met JavaScript

Nog een voordeel van dat leven in de DOM: je kunt de variabelen met JavaScript uitlezen en zelfs bijwerken, bijvoorbeeld op basis van de interacties van de gebruiker.

javascript

var root = document.querySelector(':root') ;
var rootStyles = getComputedStyle(root) ;
var mainColor = rootStyles.getPropertyValue('--main-color') ;
console.log(mainColor); // #00FF00

Om een CSS-variabele bij te werken roep je de methode setProperty aan op het element waarop de CSS-variabelen gedeclareerd zijn, met de naam van de variabele als eerste parameter en de nieuwe waarde als tweede.

javascript

root.style.setProperty('--main-color','#0000ff')

Browserondersteuning

Alle huidige browsers ondersteunen CSS-variabelen, alleen het inmiddels afgevoerde Internet Explorer negeert ze.

···

CSS

Damien Flandrin Webdeveloper sinds 2010, maker van Gekkode en Email Impact. Elk artikel wordt vóór publicatie getest op een echt project. Contact