CSS cover variabelen

Lokale variabelen gebruiken om globale variabelen te overschrijven

Van de vorige pagina hebben we geleerd dat je hele document globally variabelen kunt benaderen/gebruiken, terwijl lokale variabelen alleen binnen de selector kunnen worden gebruikt waarin ze zijn gedeclareerd.

Zie het voorbeeld op 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);
  achtergrondkleur: var(--white);
  padding: 15px;
}
button {
  achtergrondkleur: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Probeer het zelf

Soms willen we dat variabelen alleen in een specifiek deel van de pagina worden gewijzigd.

Stel dat we willen dat het button-element een andere blauwe kleur gebruikt. Dan kunnen we de --blue variabele opnieuw declareren binnen de button-selectie. Wanneer we hier var(--blue) gebruiken, zal het de waarde van de hier gedeclareerde lokaal --blue variabele gebruiken.

We zien dat de lokaal gedeclareerde --blue variabele het globale --blue variabele van het button-element overschrijft:

Voorbeeld

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  achtergrondkleur: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  achtergrondkleur: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Probeer het zelf

Voeg een nieuwe lokale variabele toe

Als je een variabele alleen op één plek gebruikt, kun je ook een nieuwe lokale variabele declareren, zo:

Voorbeeld

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  achtergrondkleur: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  achtergrondkleur: var(--white);
  color: var(--button-blue);
  border: 1px solide var(--button-blue);
  padding: 5px;
}

Probeer het zelf

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Functie
var() 49.0 15.0 31.0 9.1 36.0

CSS var() functie

Functie Beschrijving
var() Voeg de waarde van de CSS variabele in.