CSS övergripande variabler

Överdela globala variabler med lokala variabler

Från föregående sida lär vi oss att vi kan komma åt och använda globala variabler i hela dokumentet, medan lokala variabler bara kan användas inom den väljare där de deklareras.

Se tillbaka på exempel på föregående sida:

Exempel

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

Prova själv

Ibland vill vi att variabeln bara ska ändras i en specifik del av sidan.

Anta att vi vill att button-elementet ska använda en annan blå färg. Då kan vi omdeklarera --blue-variabeln inom button-väljaren. När vi använder var(--blue) i denna väljare kommer den att använda värdet för den lokala --blue-variabeln här.

Vi ser att den lokala --blue-variabeln överger den globala --blue-variabeln för button-elementet:

Exempel

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

Prova själv

Lägg till en ny lokal variabel

Om vi bara använder en variabel på ett ställe, kan vi också deklarera en ny lokal variabel, så här:

Exempel

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

Prova själv

Webbläsarsupport

Tal i tabellen anger den första webbläsaren som helt stöder egenskapen.

Funktion
var() 49.0 15.0 31.0 9.1 36.0

CSS var() funktion

Funktion Beskrivning
var() Infoga värdet för CSS-variabeln.