CSS Variabelen

CSS Variabelen

De var() functie wordt gebruikt om de waarden van CSS variabelen in te voegen.

CSS variabelen kunnen de DOM benaderen, wat betekent dat u variabelen met lokaal of globaal bereik kunt maken, variabelen met JavaScript kunnen wijzigen, en variabelen op basis van media queries kunnen wijzigen.

Een goed gebruik van CSS variabelen om ontwerpkleuren te beheren. U kunt deze in variabelen plaatsen zonder dezelfde kleuren telkens opnieuw te kopiëren en te plakken.

Traditionele manier

Het volgende voorbeeld toont de traditionele manier van definiëren van enkele kleuren in een stijltabel (door voor elk specifiek element de te gebruiken kleur te definiëren):

Voorbeeld

body { achtergrondkleur: #1e90ff; }
h2 { ondersteunde rand: 2px vast #1e90ff; }
.container {
  kleur: #1e90ff;
  achtergrondkleur: #ffffff;
  padding: 15px;
}
button {
  achtergrondkleur: #ffffff;
  kleur: #1e90ff;
  rand: 1px vast #1e90ff;
  padding: 5px;
}

Probeer het zelf uit

De syntaxis van de var() functie

De var() functie wordt gebruikt om de waarden van CSS variabelen in te voegen.

De syntaxis van de var() functie is als volgt:

var(naam, waarde)
waarde Beschrijving
naam Verplicht. Variabelenaam (beginnend met twee backslashes).
waarde Optioneel. Terugvalwaarde (gebruikt wanneer de variabele niet wordt gevonden).

Opmerking:Variabelennamen moeten beginnen met twee backslashes (--), en zijn hoofdlettergevoelig!

Hoe werkt var()?

Eerst: CSS variabelen kunnen globaal of lokaal bereik hebben.

Globale variabelen kunnen over het hele document worden toegang verkregen/gebruikt, terwijl lokale variabelen alleen binnen de selector waarin ze zijn gedeclareerd kunnen worden gebruikt.

Als u een variabele met globaal bereik wilt maken, verklaren dan in de :root selector. De :root selector matcht de wortelelement van het document.

Als u een variabele met lokale bereik wilt maken, verklaren dan de selector waarin u het wilt gebruiken.

Het volgende voorbeeld is hetzelfde als het vorige voorbeeld, maar hier gebruiken we de var() functie.

Eerst stellen we twee globale variabelen in (--blauw en --wit). Vervolgens gebruiken we de var() functie later in de stijltafel om de waarden van de variabelen in te voegen:

Voorbeeld

:root {
  --blauw: #1e90ff;
  --wit: #ffffff;
}
body { achtergrondkleur: var(--blauw); }
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;
}

Probeer het zelf uit

De voordelen van var() zijn als volgt:

  • Maakt de code gemakkelijker leesbaar (gemakkelijker te begrijpen)
  • Maakt het wijzigen van kleurwaarden gemakkelijker

Als u de kleuren blauw en wit wilt wijzigen naar een zachtere blauw en wit, hoeft u alleen maar twee variabelenwaarden te wijzigen:

Voorbeeld

:root {
  --blauw: #6495ed;
  --wit: #faf0e6;
}
body { achtergrondkleur: var(--blauw); }
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;
}

Probeer het zelf uit

Browser Ondersteuning

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.