CSS-Überschreibungsvariablen
Globale Variable mit lokaler Variable überschreiben
Auf der vorherigen Seite haben wir gelernt, dass auf globale Variablen im gesamten Dokument zugegriffen/verwendet werden kann, während lokale Variablen nur innerhalb des Selektors verwendet werden können, in dem sie deklariert sind.
Sehen Sie sich das Beispiel von 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;
}
Manchmal möchten wir, dass sich die Variablen nur in einem bestimmten Abschnitt der Seite ändern.
Angenommen, wir möchten eine andere blaue Farbe für Schaltflächenelemente. Dann können wir die Variable --blue in der Schaltflächenauswahl erneut deklarieren. Wenn wir var(--blue) in diesem Selektor verwenden, wird der hier deklarierte Wert der lokalen --blue Variablen verwendet.
Wir sehen, dass die lokale Variable --blue die globale Variable --blue für die Schaltflächenelemente ü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; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Fügen Sie eine neue lokale Variable hinzu
Wenn eine Variable nur an einer einzigen Stelle verwendet werden soll, hätten wir auch eine neue lokale Variable deklarieren können, etwa so:
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; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-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 |