CSS-variabler - var()-funktionen


Innehållsförteckning

    Visa innehållsförteckning


CSS-variabler

Funktionen var() används för att infoga värdet på en CSS-variabel.

CSS-variabler har tillgång till DOM, vilket innebär att du kan skapa variabler med lokal eller global räckvidd, ändra variablerna med JavaScript och ändra variablerna baserat på mediefrågor.

Ett bra sätt att använda CSS-variabler är när det kommer till färgerna på din design. Istället för att kopiera och klistra in samma färger om och om igen kan du placera dem i variabler.


Det traditionella sättet

Följande exempel visar det traditionella sättet att definiera vissa färger i en stilmall (genom att definiera de färger som ska användas, för varje specifikt element):

Exempel

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

Prova själv →

<!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>



Syntax för funktionen var()

Funktionen var() används för att infoga värdet på en CSS-variabel.

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

 var(--name, value)
name

Nödvändig. Variabelnamnet (måste börja med två streck)

value

Frivillig. Reservvärdet (används om variabeln inte hittas)

Obs! Variabelnamnet måste börja med två bindestreck (--) och det är skiftlägeskänsligt!



Hur var() fungerar

Först och främst: CSS-variabler kan ha ett globalt eller lokalt omfång.

Globala variabler kan nås/användas genom hela dokumentet, medan lokala variabler kan endast användas i väljaren där de deklareras.

För att skapa en variabel med globalt omfång, deklarera den i :root väljare. :root-väljaren matchar dokumentets rotelement.

För att skapa en variabel med lokalt omfång, deklarera den i väljaren som ska använda den.

Följande exempel är lika med exemplet ovan, men här använder vi funktionen var().

Först deklarerar vi två globala variabler (--blå och -vit). Sedan använder vi var() funktion för att infoga värdet på variablerna senare i stilmallen:

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 →

<!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>


Fördelarna med att använda var() är:

  • gör koden lättare att läsa (mer förståelig)

  • gör det mycket lättare att ändra färgvärdena

För att ändra den blå och vita färgen till en mjukare blå och vit, behöver du bara för att ändra de två variabelvärdena:

Exempel

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

Prova själv →

<!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>



Webbläsarstöd

Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder var() funktion.

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Funktion

var()

Infogar värdet på en CSS-variabel