CSS var() funktion

Definition og brug

CSS' var() Funktionen bruges til at indsætte værdierne af CSS-variabler.

Eksempel

Eksempel 1

Først, deklarér en global variabel med navnet --main-bg-color, og brug derefter i stilarket: var() Funktionen indsætter værdien af variablen:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Prøv det selv

Eksempel 2

En anden brug var() Eksempel på at indsætte flere CSS-variabelværdier med funktionen:

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

Prøv det selv

CSS-syntaks

var(--name, value)

Tekniske detaljer

Browser-understøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne funktion.

Relaterede sider

Tutorial:CSS variabler