CSS Überlagerungsvariablen

Globale Variablen mit lokalen Variablen überschreiben

Von der vorherigen Seite wissen wir, dass globale Variablen im gesamten Dokument aufgerufen/verwendet werden können, während lokale Variablen nur im Selektor, in dem sie deklariert wurden, verwendet werden können.

Sehen Sie sich das Beispiel auf der vorherigen Seite an:

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

Manchmal möchten wir, dass die Variable nur in einem bestimmten Teil der Seite geändert wird.

Angenommen, wir möchten, dass das button-Element eine andere Farbe hat. Dann können wir den --blue-Variable innerhalb des button-Selektors neu deklarieren. Wenn wir in diesem Selektor var(--blue) verwenden, wird es den Wert der hier deklarierten lokalen --blue Variable verwenden.

Wir sehen, dass die lokale --blue Variable die globale --blue Variable des button-Elements überschreibt:

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 {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Probieren Sie es selbst aus

Eine neue lokale Variable hinzufügen

Wenn eine Variable nur an einem Ort verwendet wird, können wir auch eine neue lokale Variable deklarieren, wie folgt:

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 {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

Probieren Sie es selbst aus

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, 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() Geben Sie den Wert der CSS-Variablen ein.