CSS Variablen

CSS Variablen

Die var() -Funktion wird verwendet, um die Werte von CSS-Variablen einzufügen.

CSS-Variablen können auf das DOM zugreifen, was bedeutet, dass Sie Variablen mit lokaler oder globaler Reichweite erstellen können, Variablen mit JavaScript ändern und Variablen basierend auf Media Queries ändern können.

Eine gute Methode zur Verwendung von CSS-Variablen bezieht sich auf die Farben des Designs. Sie können sie in Variablen platzieren, ohne sie immer wieder zu kopieren und einzufügen.

Traditionelle Methode

Nachstehendes Beispiel zeigt die traditionelle Methode zur Definition einiger Farben im Stilblatt (durch Definition der zu verwendenden Farben für jeden spezifischen 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;
}

Probieren Sie es selbst aus

Syntax der var() -Funktion

Die var() -Funktion wird verwendet, um die Werte von CSS-Variablen einzufügen.

Die Syntax der var() -Funktion ist wie folgt:

var(name, value)
Wert Beschreibung
name Erforderlich. Variablenname (beginnt mit zwei Doppelstrichen).
value Optional. Rückgabewert (wird verwendet, wenn die Variable nicht gefunden wird).

Anmerkung:Der Variablenname muss mit zwei Doppelstrichen (--) beginnen und ist大小写敏感!

Wie funktioniert var()?

Erstens: CSS-Variablen können globale oder lokale Reichweite haben.

Globale Variablen können im gesamten Dokument aufgerufen/verwendet werden, während lokale Variablen nur im Selector verwendet werden können, in dem sie erklärt wurden.

Um Variablen mit globaler Reichweite zu erstellen, erklären Sie sie im :root-Selektor. Der :root-Selektor entspricht dem Wurzelelement des Dokuments.

Um Variablen mit lokaler Reichweite zu erstellen, erklären Sie sie im Selector, in dem sie verwendet werden sollen.

Nachstehendes Beispiel ist identisch mit dem obigen Beispiel, aber hier verwenden wir die var() -Funktion.

Zunächst erklären wir zwei globale Variablen (--blue und --white). Anschließend verwenden wir die var() -Funktion, um die Werte der Variablen später im Stilblatt 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;
}

Probieren Sie es selbst aus

Die Vorteile der Verwendung von var() sind:

  • Macht den Code lesbarer (einfacher zu verstehen)
  • Erleichtert die Änderung von Farbwerten

Möchten Sie die Farben Blau und Weiß in sanfteren Farben ändern, müssen Sie nur zwei 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;
}

Probieren Sie es selbst aus

Browser-Unterstützung

Die Zahlen in der Tabelle zeigen die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.

Funktion
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Funktion

Funktion Beschreibung
var() Legen Sie den Wert der CSS-Variablen ein.