CSS var() funktionen

Definition och användning

CSS: var() Funktionen används för att infoga värden för CSS-variabler.

Exempel

Exempel 1

Först, deklarera en global variabel med namnet --main-bg-color, och använd sedan i stilmallarna: var() Funktionen infogar värdet för variabeln:

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

Prova själv

Exempel 2

En annan användning var() Exempel på att infoga flera CSS-variabelvärden 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);
}

Prova själv

CSS-syntax

var(--name, value)
Värde Beskrivning
--name Obligatoriskt. Variabelnamn (måste börja med två bindestreck).
value Valfritt. Reservvärde (om variabeln inte hittas).

Tekniska detaljer

Version: CSS3

Webbläsarstöd

Tabellens siffror representerar den första webbläsarversionen som helt stöder denna funktion.

Chrome Edge Firefox Safari Opera
49 15 31 9.1 36

Relaterade sidor

Lär:CSS variabler