Funkcja CSSFunkcje i jednostki

var()

Wstawia wartość zmiennej CSS, czyli właściwości niestandardowej zapisanej jako --nazwa. Pozwala też podać wartość zapasową.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Warianty użycia
Warianty użycia w praktyce
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

:root {
  --brand: #7c3aed;
  --radius: 12px;
}

.alert {
  --tone: var(--brand);
  padding: 12px 14px;
  border-left: 4px solid var(--tone);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tone) 15%, transparent);
}

.alert.error {
  --tone: #f43f5e;
}

Podgląd

Wariant .error zmienia tylko jedną zmienną. Kolor paska i tła przeliczają się same, bo obie deklaracje korzystają z --tone.

Definicja i zastosowanie

Zmienne CSS (oficjalnie: właściwości niestandardowe) deklarujesz jak zwykłe właściwości, tylko nazwa zaczyna się od dwóch myślników: --kolor-marki: #7c3aed;. Funkcja var(--kolor-marki) wstawia tę wartość w dowolnej deklaracji. Zmiana jednej zmiennej zmienia wszystkie miejsca, które z niej korzystają, także na żywo, np. po przełączeniu motywu.

Zmienne podlegają kaskadzie i dziedziczeniu jak każda właściwość. Zadeklarowane na :root działają na całej stronie, a zadeklarowane na elemencie tylko w nim i w jego potomkach. Komponent może więc nadpisać zmienną u siebie (.alert { --kolor: #f43f5e; }), nie ruszając reszty strony. Wielkość liter ma znaczenie: --Kolor i --kolor to dwie różne zmienne.

Drugi argument to wartość zapasowa: var(--odstep, 16px) użyje 16px, jeśli zmienna nie istnieje. Wszystko po pierwszym przecinku traktowane jest jako jedna wartość, więc var(--font, Georgia, serif) jest poprawne. Zapasem może być też inne var(), np. var(--akcent, var(--kolor-marki)).

Przeglądarka nie sprawdza zawartości zmiennej w chwili deklaracji. Jeśli wstawisz ją tam, gdzie nie pasuje, np. --odstep: red w padding, deklaracja nie wraca do wcześniejszej reguły, tylko przyjmuje wartość domyślną albo odziedziczoną. Zmienną można wstawić tylko jako wartość, nigdy jako nazwę właściwości czy fragment selektora.

Składnia

--nazwa: wartość;
właściwość: var(--nazwa, <wartość zapasowa>?);

Warianty użycia

var(--brand)
kolor z rodzica
Zmienna zadeklarowana na kontenerze trafia do przycisku i do etykiety, bo dziedziczy się w dół drzewa.
var(--cta, #0ea5e9)
wartość zapasowa
Zmiennej --cta nikt nie zadeklarował, więc przycisk dostaje wartość zapasową podaną po przecinku.
.tag { --brand: … }
nadpisanie w komponencie
Etykieta nadpisuje zmienną u siebie. Przycisk nadal korzysta z wartości rodzica, bo zmiana dotyczy tylko etykiety i jej potomków.
var(--accent, var(--brand))
zapas z innej zmiennej
Brakuje --accent, więc przeglądarka sięga po drugą zmienną, --brand. Tak buduje się łańcuch: najpierw kolor szczegółowy, a gdy go brak, ogólny.
calc(var(--scale) * 1rem)
liczba zamieniona na długość
Zmienna przechowuje samą liczbę, a calc() zamienia ją na jednostkę. Przycisk i etykieta dostają tekst o wielkości 1,4rem.
--brand: 20px
zła wartość
Zmienna istnieje, ale 20px nie jest kolorem. Wartość zapasowa nie zadziała, bo zmienna nie jest pusta: przycisk traci tło, a etykieta obramowanie i kolor.

Zapis	Efekt	Opis
var(--brand)	kolor z rodzica	Zmienna zadeklarowana na kontenerze trafia do przycisku i do etykiety, bo dziedziczy się w dół drzewa.
var(--cta, #0ea5e9)	wartość zapasowa	Zmiennej `--cta` nikt nie zadeklarował, więc przycisk dostaje wartość zapasową podaną po przecinku.
.tag { --brand: … }	nadpisanie w komponencie	Etykieta nadpisuje zmienną u siebie. Przycisk nadal korzysta z wartości rodzica, bo zmiana dotyczy tylko etykiety i jej potomków.
var(--accent, var(--brand))	zapas z innej zmiennej	Brakuje `--accent`, więc przeglądarka sięga po drugą zmienną, `--brand`. Tak buduje się łańcuch: najpierw kolor szczegółowy, a gdy go brak, ogólny.
calc(var(--scale) * 1rem)	liczba zamieniona na długość	Zmienna przechowuje samą liczbę, a `calc()` zamienia ją na jednostkę. Przycisk i etykieta dostają tekst o wielkości 1,4rem.
--brand: 20px	zła wartość	Zmienna istnieje, ale `20px` nie jest kolorem. Wartość zapasowa nie zadziała, bo zmienna nie jest pusta: przycisk traci tło, a etykieta obramowanie i kolor.

Warianty użycia w praktyce

var(--brand)

Zmienna zadeklarowana na kontenerze trafia do przycisku i do etykiety, bo dziedziczy się w dół drzewa.

.demo { --brand: #7c3aed; }

var(--cta, #0ea5e9)

Zmiennej --cta nikt nie zadeklarował, więc przycisk dostaje wartość zapasową podaną po przecinku.

.btn { background: var(--cta, #0ea5e9); }

.tag { --brand: … }

Etykieta nadpisuje zmienną u siebie. Przycisk nadal korzysta z wartości rodzica, bo zmiana dotyczy tylko etykiety i jej potomków.

.demo { --brand: #7c3aed; }
.tag { --brand: #f43f5e; }

var(--accent, var(--brand))

Brakuje --accent, więc przeglądarka sięga po drugą zmienną, --brand. Tak buduje się łańcuch: najpierw kolor szczegółowy, a gdy go brak, ogólny.

.demo { --brand: #10b981; }
.btn {
  background: var(--accent, var(--brand));
}

calc(var(--scale) * 1rem)

Zmienna przechowuje samą liczbę, a calc() zamienia ją na jednostkę. Przycisk i etykieta dostają tekst o wielkości 1,4rem.

.demo { --scale: 1.4; }
.btn,
.tag {
  font-size: calc(var(--scale) * 1rem);
}

--brand: 20px

Zmienna istnieje, ale 20px nie jest kolorem. Wartość zapasowa nie zadziała, bo zmienna nie jest pusta: przycisk traci tło, a etykieta obramowanie i kolor.

.demo { --brand: 20px; }

Więcej przykładów

Zmienne ustawiane z JavaScriptu

CSS

.spotlight {
  background:
    radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgb(124 58 237 / 0.45), transparent 60%),
    #18181b;
}

HTML przykładu

<div class="spotlight" style="display: grid; place-items: center; height: 140px; border: 1px solid #27272a; border-radius: 14px;">Porusz kursorem nad kartą</div>
<script>
  const card = document.querySelector('.spotlight')
  card.addEventListener('pointermove', (event) => {
    card.style.setProperty('--x', event.offsetX + 'px')
    card.style.setProperty('--y', event.offsetY + 'px')
  })
</script>

Podgląd

Skrypt ustawia tylko dwie zmienne, --x i --y, a resztę robi CSS. Zanim poruszysz kursorem, działa wartość zapasowa: środek karty.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Wartość zapasowa działa tylko wtedy, gdy zmienna nie istnieje. Jeśli istnieje, ale ma złą wartość, var() po zapas nie sięgnie.
Zmienne odczytasz i zmienisz z JavaScriptu: getComputedStyle(el).getPropertyValue("--brand") oraz el.style.setProperty("--brand", "#10b981").
Zmienna nie przyklei jednostki do liczby: var(--n)px nie zadziała. Użyj calc(var(--n) * 1px).

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs