CSS dekorerede variabler

Overskriv globale variabler med lokale variabler

Fra sidste side lærte vi, at vi kan få adgang til og bruge globale variabler i hele dokumentet, mens lokale variabler kun kan bruges i den vælger, hvor de er deklarerede.

Se eksemplet på sidste side:

eksempel

: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;
}

Prøv det selv

Nogle gange ønsker vi, at variabler kun ændres i specifikke dele af siden.

Antag, at vi vil have, at knap-elementet bruger en anden blå farve. Så kan vi gen-deklarere --blue variablen inden for button-vælgeren. Når vi bruger var(--blue) i denne vælger, vil den bruge værdien af den lokale --blue variabel her.

Vi ser, at den lokale --blue variabel vil overskrive den globale --blue variabel på button-elementet:

eksempel

: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;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Prøv det selv

Tilføj en ny lokal variabel

Hvis vi kun bruger en variabel et sted, kan vi også erklære en ny lokal variabel, sådan her:

eksempel

: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;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

Prøv det selv

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Funktion
var() 49.0 15.0 31.0 9.1 36.0

CSS var() funktion

Funktion Beskrivelse
var() Indsæt værdien for CSS variabelen.