Die Funktion var()
wird verwendet, um den Wert von a einzufügen CSS-Variable.
CSS-Variablen haben Zugriff auf das DOM, was bedeutet, dass Sie erstellen können Variablen mit lokalem oder globalem Gültigkeitsbereich, ändern Sie die Variablen mit JavaScript und Ändern Sie die Variablen basierend auf Medienabfragen.
Eine gute Möglichkeit, CSS-Variablen zu verwenden, besteht darin, Ihre Farben festzulegen Design. Anstatt die gleichen Farben immer wieder zu kopieren und einzufügen, können Sie dies tun Platzieren Sie sie in Variablen.
Das folgende Beispiel zeigt die traditionelle Art, einige Farben in einem Stylesheet zu definieren (durch Definieren der zu verwendenden Farben für jedes spezifische 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;
}
Probieren Sie es selbst aus →
<!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()
Die Funktion var()
wird verwendet, um den Wert von a einzufügen CSS-Variable.
Die Syntax der Funktion var()
lautet wie folgt:
var(--name, value)
Erforderlich. Der Variablenname (muss mit zwei beginnen Striche)
Optional. Der Fallback-Wert (wird verwendet, wenn die Variable nicht gefunden wird)
Hinweis: Der Variablenname muss mit zwei Bindestrichen (--) beginnen und es wird zwischen Groß- und Kleinschreibung unterschieden!
var()
Zunächst einmal: CSS-Variablen können einen globalen oder lokalen Gültigkeitsbereich haben.
Auf globale Variablen kann im gesamten Dokument zugegriffen/verwendet werden Lokale Variablen können nur innerhalb des Selektors verwendet werden, in dem sie deklariert sind.
Um eine Variable mit globalem Gültigkeitsbereich zu erstellen, deklarieren Sie sie innerhalb von :root
Wähler. Der Selektor :root
entspricht dem Stammelement des Dokuments.
Um eine Variable mit lokalem Gültigkeitsbereich zu erstellen, deklarieren Sie sie innerhalb des Selektors, der sie verwenden wird.
Das folgende Beispiel entspricht dem obigen Beispiel, aber hier verwenden wir die Funktion var()
.
Zuerst deklarieren wir zwei globale Variablen (--blue und --white). Dann verwenden wir die var()
-Funktion, um den Wert der Variablen später in das Stylesheet einzufügen:
: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;
}
Probieren Sie es selbst aus →
<!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>
Vorteile der Verwendung von var()
sind:
macht den Code leichter lesbar (verständlicher)
erleichtert das Ändern der Farbwerte erheblich
Um die blaue und weiße Farbe in ein weicheres Blau und Weiß zu ändern, brauchen Sie nur Um die beiden Variablenwerte zu ändern:
: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;
}
Probieren Sie es selbst aus →
<!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>
Die Zahlen in der Tabelle geben die erste Browserversion an, die das vollständig unterstützt var()
-Funktion.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
var()
FunktionFügt den Wert einer CSS-Variablen ein