CSS-overschrijvende variabelen
Globale variabele overschrijven met lokale variabele
Van de vorige pagina hebben we geleerd dat globale variabelen toegankelijk/gebruikt kunnen worden door het hele document, terwijl lokale variabelen alleen gebruikt kunnen worden binnen de selector waar ze gedeclareerd zijn.
Kijk naar het voorbeeld van de vorige pagina:
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;
}
Soms willen we dat de variabelen alleen in een specifiek gedeelte van de pagina veranderen.
Stel dat we een andere kleur blauw willen voor knopelementen. Vervolgens kunnen we de --blue variabele opnieuw declareren in de knopselector. Wanneer we var(--blue) gebruiken in deze selector, zal het de lokale --blue variabele waarde gebruiken die hier gedeclareerd is.
We zien dat de lokale --blue variabele de globale --blue variabele voor de knopelementen zal overschrijven:
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 {
--blue: #0000ff; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Een nieuwe lokale variabele toevoegen
Als een variabele maar op één enkele plaats gebruikt moet worden, hadden we ook een nieuwe lokale variabele kunnen declareren, zoals deze:
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 {
--button-blue: #0000ff; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-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 |