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.
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):
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>
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)
Nödvändig. Variabelnamnet (måste börja med två streck)
Frivillig. Reservvärdet (används om variabeln inte hittas)
Obs! Variabelnamnet måste börja med två bindestreck (--) och det är skiftlägeskänsligt!
var()
fungerarFö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:
: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:
: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>
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 |
var()
FunktionInfogar värdet på en CSS-variabel