Funkcja CSS var()

Definicja i użycie

CSS var() Funkcja używana do wstawienia wartości zmiennych CSS.

Przykład

Przykład 1

Najpierw, zadeklaruj globalną zmienną o nazwie --main-bg-color, a następnie użyj jej w arkuszu stylów: var() Funkcja wstawiająca wartość zmiennej:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Spróbuj sam

Przykład 2

Inny przykład użycia var() Przykład użycia funkcji do wstawienia wielu wartości zmiennych CSS:

: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);
}

Spróbuj sam

Gramatyka CSS

var(--name, value)

Szczegóły techniczne

Wspierane przeglądarki

Tabela zawiera liczby reprezentujące wersje przeglądarek, które w pełni wspierają tę funkcję.

Strony związane

Kurs:Zmienne CSS