CSS-Variablen - Die var()-Funktion
CSS-Variablen
Die var()Funktion wird verwendet, um den Wert einer CSS-Variable einzufügen.
CSS-Variablen haben Zugriff auf das DOM, was bedeutet, dass Sie Variablen mit lokalem oder globalem Gültigkeitsbereich erstellen, die Variablen mit JavaScript ändern und die Variablen basierend auf Medienabfragen ändern können.
Eine gute Möglichkeit, CSS-Variablen zu verwenden, ist, wenn es um die Farben Ihres Designs geht. Anstatt dieselben Farben immer wieder zu kopieren und einzufügen, können Sie sie in Variablen platzieren.
Der traditionelle Weg
Das folgende Beispiel zeigt die herkömmliche Methode zum Definieren einiger Farben in einem Stylesheet (durch Definieren der zu verwendenden Farben für jedes spezifische Element):
Beispiel
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;
}
Syntax der var()-Funktion
Die var()Funktion wird verwendet, um den Wert einer CSS-Variable einzufügen.
Die Syntax der var()Funktion lautet wie folgt:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
Hinweis: Der Variablenname muss mit zwei Bindestrichen (--) beginnen und es wird zwischen Groß- und Kleinschreibung unterschieden!
Wie var() funktioniert
Zunächst einmal: CSS-Variablen können einen globalen oder lokalen Gültigkeitsbereich haben.
Auf globale Variablen kann im gesamten Dokument zugegriffen/verwendet werden, während lokale Variablen nur innerhalb des Selektors verwendet werden können, in dem sie deklariert sind.
Um eine Variable mit globalem Gültigkeitsbereich zu erstellen, deklarieren Sie sie innerhalb des :root
Selektors. Der :rootSelektor entspricht dem Wurzelelement des Dokuments.
Um eine Variable mit lokalem Gültigkeitsbereich zu erstellen, deklarieren Sie sie innerhalb des Selektors, der sie verwenden soll.
Das folgende Beispiel entspricht dem obigen Beispiel, aber hier verwenden wir die var()Funktion.
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:
Beispiel
: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;
}
Vorteile der Verwendung von var() sind:
- macht den Code leichter lesbar (verständlicher)
- macht es viel einfacher, die Farbwerte zu ändern
Um die blaue und weiße Farbe in ein weicheres Blau und Weiß zu ändern, müssen Sie nur die beiden Variablenwerte ändern:
Beispiel
: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;
}
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die
var()Funktion vollständig unterstützt.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS-var()-Funktion
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |