CSS-variabler - var()-funktionen

Indholdsfortegnelse

    Vis indholdsfortegnelse

CSS-variabler

Funktionen var() bruges til at indsætte værdien af en CSS variabel.

CSS-variabler har adgang til DOM, hvilket betyder, at du kan oprette variabler med lokalt eller globalt omfang, ændre variablerne med JavaScript og ændre variablerne baseret på medieforespørgsler.

En god måde at bruge CSS-variable på er, når det kommer til farverne på din design. I stedet for at kopiere og indsætte de samme farver igen og igen, kan du placere dem i variabler.

Den traditionelle måde

Det følgende eksempel viser den traditionelle måde at definere nogle farver på i et typografiark (ved at definere de farver, der skal bruges, for hvert enkelt 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 →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>The Traditional Way</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Syntaks for funktionen var()

Funktionen var() bruges til at indsætte værdien af en CSS variabel.

Syntaksen for funktionen var() er som følger:

 var(--name, value)
name

Påkrævet. Variabelnavnet (skal starte med to tankestreger)

value

Valgfri. Fallback-værdien (bruges, hvis variablen ikke findes)

Bemærk: Variabelnavnet skal begynde med to bindestreger (--), og der skelnes mellem store og små bogstaver!

Hvordan var() virker

Først og fremmest: CSS-variabler kan have et globalt eller lokalt omfang.

Globale variabler kan tilgås/bruges gennem hele dokumentet, mens lokale variabler kan kun bruges inde i vælgeren, hvor de er deklareret.

For at oprette en variabel med globalt omfang skal du erklære den inde i :root vælger. :root-vælgeren matcher dokumentets rodelement.

For at oprette en variabel med lokalt omfang skal du erklære den inde i den vælger, der skal bruge den.

Det følgende eksempel er lig med eksemplet ovenfor, men her bruger vi funktionen var().

Først erklærer vi to globale variable (--blå og -hvid). Så bruger vi var() funktion til at indsætte værdien af variablerne senere i typografiarket:

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 →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Fordelene ved at bruge var() er:

  • gør koden lettere at læse (mere forståelig)

  • gør det meget nemmere at ændre farveværdierne

For at ændre den blå og hvide farve til en blødere blå og hvid, skal du bare bruge for at ændre de 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 →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Browser support

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter var() funktion.

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Funktion

var()

Indsætter værdien af en CSS-variabel