CSS variabler

CSS variabler

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

CSS-variabler kan komma åt DOM, vilket innebär att du kan skapa variabler med lokal eller globalt effektområde, använda JavaScript för att ändra variabler, och ändra variabler baserat på media queries.

Ett bra sätt att använda CSS-variabler är att inkludera designens färger. Du kan placera dem i variabler utan att behöva klistra in samma färger flera gånger.

Traditionellt sätt

Följande exempel visar det traditionella sättet att definiera några färger i stilmärket (genom att definiera den färg som ska användas för varje specifikt element):

Exempel

body { bakgrundsfärg: #1e90ff; }
h2 { nedre kant: 2px solid #1e90ff; }
.container {
  färg: #1e90ff;
  bakgrundsfärg: #ffffff;
  padding: 15px;
}
button {
  bakgrundsfärg: #ffffff;
  färg: #1e90ff;
  kanter: 1px solid #1e90ff;
  padding: 5px;
}

Prova själv

Syntax för var() -funktionen

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

Syntaxen för var() -funktionen är som följer:

var(name, value)
Värde Beskrivning
name Obligatorisk. Variabelnamn (börjar med två backstegstecken).
value Valfritt. Fallback-värde (används om variabeln inte hittas).

Kommentar:Variabelnamn måste börja med två backstegstecken (--), och är大小写敏感！

Hur fungerar var()

Först: CSS-variabler kan ha globalt eller lokalt effektområde.

Globala variabler kan nås/nyttjas över hela dokumentet, medan lokala variabler bara kan användas inom den väljare där de deklarerades.

För att skapa en variabel med globalt effektområde, deklarera den i :root-väljaren. :root-väljaren matchar dokumentets rot-element.

För att skapa en variabel med lokal effektområde, deklarera den i den väljare där du ska använda den.

Följande exempel är detsamma som det föregående, men här använder vi var() -funktionen.

Först deklarerar vi två globala variabler (--blå och --vit). Sedan använder vi var() -funktionen för att senare infoga variablens värden i stilmärket:

Exempel

:root {
  --blå: #1e90ff;
  --vit: #ffffff;
}
body { bakgrundsfärg: var(--blå); }
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

Användning av var() har följande fördelar:

  • Gör koden lättare att läsa (enklare att förstå)
  • Gör det enklare att ändra färgvärden

Om du vill ändra blått och vitt till mildare blått och vitt, behöver du bara ändra två variabelvärden:

Exempel

:root {
  --blå: #6495ed;
  --vit: #faf0e6;
}
body { bakgrundsfärg: var(--blå); }
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

Webbläsarsupport

Tal i tabellen anger den första webbläsaren som fullständigt 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.