CSS var() Functie
Voorbeeld
Declareer eerst een globale variabele met de naam "--main-bg-color", gebruik vervolgens de functie var() om de waarde van de variabele later in het stijlblad in te voegen:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De functie var() wordt gebruikt om de waarde van een CSS-variabele in te voegen.
Versie: | CSS3 |
---|
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de functie volledig ondersteunt.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS-syntaxis
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) |
Meer voorbeelden
Voorbeeld
Een ander voorbeeld dat de functie var() gebruikt om verschillende waarden voor CSS-variabelen in te voegen:
: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);
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-variabelen