CSS-variabelen - De var()-functie
CSS-variabelen
De var()functie wordt gebruikt om de waarde van een CSS-variabele in te voegen.
CSS-variabelen hebben toegang tot de DOM, wat betekent dat u variabelen met een lokaal of globaal bereik kunt maken, de variabelen kunt wijzigen met JavaScript en de variabelen kunt wijzigen op basis van mediaquery's.
Een goede manier om CSS-variabelen te gebruiken, is als het gaat om de kleuren van uw ontwerp. In plaats van steeds dezelfde kleuren te kopiëren en plakken, kun je ze in variabelen plaatsen.
De traditionele manier
Het volgende voorbeeld toont de traditionele manier om sommige kleuren in een stijlblad te definiëren (door de te gebruiken kleuren voor elk specifiek element te definiëren):
Voorbeeld
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
Syntaxis van de var()-functie
De var()functie wordt gebruikt om de waarde van een CSS-variabele in te voegen.
De syntaxis van de var()functie is als volgt:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
Opmerking: de naam van de variabele moet beginnen met twee streepjes (--) en is hoofdlettergevoelig!
Hoe var() werkt
Allereerst: CSS-variabelen kunnen een globaal of lokaal bereik hebben.
Globale variabelen zijn toegankelijk/gebruikt door het hele document, terwijl lokale variabelen alleen kunnen worden gebruikt binnen de selector waar ze zijn gedeclareerd.
Als u een variabele met globaal bereik wilt maken, declareert u deze in de :root
selector. De :rootselector komt overeen met het hoofdelement van het document.
Als u een variabele met een lokaal bereik wilt maken, declareert u deze in de selector die deze gaat gebruiken.
Het volgende voorbeeld is gelijk aan het bovenstaande voorbeeld, maar hier gebruiken we de var()functie.
Eerst declareren we twee globale variabelen (--blue en --white). Vervolgens gebruiken we de
var()functie om de waarde van de variabelen later in het stijlblad in te voegen:
Voorbeeld
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Voordelen van het gebruik van var() zijn:
- maakt de code leesbaarder (begrijpelijker)
- maakt het veel gemakkelijker om de kleurwaarden te wijzigen
Om de blauwe en witte kleur te veranderen in een zachter blauw en wit, hoeft u alleen de twee variabele waarden te wijzigen:
Voorbeeld
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de
var()functie volledig ondersteunt.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Functie
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |