CSS- var()- Funktion
Beispiel
Deklarieren Sie zuerst eine globale Variable mit dem Namen "--main-bg-color" und verwenden Sie dann die Funktion var(), um den Wert der Variablen später in das Stylesheet einzufügen:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Funktion var() wird verwendet, um den Wert einer CSS-Variable einzufügen.
Ausführung: | CSS3 |
---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Funktion vollständig unterstützt.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS-Syntax
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) |
Mehr Beispiele
Beispiel
Ein weiteres Beispiel, das die Funktion var() verwendet, um mehrere CSS-Variablenwerte einzufügen:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
Verwandte Seiten
CSS-Tutorial: CSS-Variablen