CSS variabler

CSS variabler

var() funktionen bruges til at indsætte værdierne for CSS variabler.

CSS variabler kan tilgå DOM, hvilket betyder, at du kan oprette variabler med lokal eller global rækkevidde, ændre variabler med JavaScript, og ændre variabler baseret på medie forespørgsler.

En god måde at bruge CSS variabler på involverer farver i designet. Du kan placere dem i variabler, uden at kopiere og indsætte de samme farver igen og igen.

Traditionel metode

Følgende eksempel viser den traditionelle måde at definere nogle farver på i en stil liste (ved at definere den ønskede farve for hver specifikke element):

Eksempel

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Prøv det selv

Sådan er syntaksen for var() funktionen

var() funktionen bruges til at indsætte værdierne for CSS variabler.

Sådan er syntaksen for var() funktionen:

var(name, value)
Værdi Beskrivelse
name Obligatorisk. Variabelnavn (begynder med to bindestreger).
value Valgfri. Fald tilbage værdi (brugt, når variablen ikke findes).

Bemærkning:Variabelnavne skal begynde med to bindestreger (--), og er følsomme over for store og små bogstaver!

Sådan virker var()

Først: CSS variabler kan have global eller lokal virkning.

Globale variabler kan tilgås/bruges i hele dokumentet, mens lokale variabler kun kan bruges i den vælger, de er erklæret i.

Hvis du vil oprette en variabel med global virkning, skal du erklære den i :root vælgeren. :root vælgeren matcher dokumentets rod element.

Hvis du vil oprette en variabel med lokal virkning, skal du erklære den i den vælger, du bruger det i.

Følgende eksempel er det samme som det foregående eksempel, men her bruger vi var() funktionen.

Først erklærer vi to globale variabler (--blue og --white). Derefter bruger vi var() funktionen senere i stイルlisten til at indsætte variabelværdierne:

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

Brug af var() har følgende fordele:

  • Gør koden lettere at læse (lettere at forstå)
  • Gør det lettere at ændre farveværdier

Hvis du vil ændre blåt og hvidt til mere bløde blåt og hvidt, skal du kun ændre to variabelværdier:

Eksempel

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
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

Browser support

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 variablen.