Zmienne CSS (custom properties) wyjaśnione na żywym motywie jasnym i ciemnym zbudowanym wyłącznie ze zmiennych, getPropertyValue i setProperty w JavaScript, @property, @theme w Tailwind v4 oraz typowe pułapki.
Zmienną CSS deklarujesz z dwoma myślnikami, --brand: #2563eb;, zwykle wewnątrz :root, aby widziała ją cała strona, a odczytujesz przez var(--brand). Drugi argument to wartość zapasowa: var(--brand, blue). Zmienne dziedziczą się tak jak color, więc ponowne zdefiniowanie zmiennej na sekcji zmienia ją dla wszystkiego wewnątrz, dzięki czemu motywy są tanie.
Składnia w skrócie
Ten przewodnik omawia deklarowanie, zasięg i wartości zapasowe, a następnie przełącznik motywu, w którym zmieniają się tylko zmienne, narzędzie odczytujące i zapisujące zmienne z JavaScript na tej właśnie stronie, rejestrowane właściwości z @property, to, jak Tailwind v4 zamienia swój motyw w zmienne, oraz błędy, przez które var() po cichu przestaje działać.
Zmienne Sass są podstawiane podczas kompilacji arkusza stylów i znikają z wyniku. Custom properties CSS istnieją w przeglądarce w czasie działania, dziedziczą się przez DOM, mogą różnić się dla każdego elementu i można je zmieniać z JavaScript lub regułą media query po załadowaniu strony.
Nie. var() nie jest dozwolone w warunku reguły @media, ponieważ media queries są obliczane bez elementu, po którym można by dziedziczyć. Możesz jednak zmienić wartość zmiennej wewnątrz bloku media query i to jest zwykły sposób na responsywne tokeny.
Sprawdź pisownię i wielkość liter, czy zmienna jest zdefiniowana na elemencie lub jego przodku i czy końcowa wartość jest poprawna dla danej właściwości. Jeśli podstawiona wartość jest niepoprawna, deklaracja staje się nieważna w momencie obliczania wartości, a właściwość wraca do wartości dziedziczonej lub początkowej, a nie do Twojej poprzedniej reguły.
Niezarejestrowana zmienna jest traktowana jak ciąg znaków, więc przeskakuje w połowie zamiast płynnie się zmieniać. Zarejestruj ją przez @property ze składnią taką jak <color> lub <angle>, a przeglądarka będzie mogła ją płynnie interpolować w przejściach i animacjach.
Custom properties i var() działają we wszystkich głównych przeglądarkach od lat. @property jest nowsze: Firefox dodał je w wersji 128 w 2024 roku, więc sprawdź caniuse, jeśli wspierasz starsze wersje, i zostaw niezarejestrowaną wartość zapasową.
Wartości jasne i ciemne
Druga karta definiuje --accent na nowo dla siebie. Trzecia używa zmiennej, której nikt nie zdefiniował, więc widać kolor zapasowy.
Jeden zestaw reguł komponentów. Motyw to inny zestaw wartości, wybierany przez ustawienie systemowe lub atrybut data-theme.
Odczytaj obliczoną wartość z dowolnego elementu. Zapisz na :root dla zmiany globalnej lub na jednym elemencie, aby wpłynąć tylko na jego poddrzewo.
Zarejestrowanie --angle jako <angle> pozwala przeglądarce go interpolować. Bez rejestracji gradient przeskakiwałby zamiast się obracać.
W Tailwind v4 zmienne w @theme generują klasy narzędziowe, takie jak bg-brand, i są też emitowane jako prawdziwe zmienne CSS, których możesz używać z var().
Rzeczy, na których ludzie się potykają
Motyw jasny i ciemny, tylko zmienne
Motyw
tryb jasny
tryb ciemny
Raport tygodniowy
Więcej zamówień niż w zeszłym tygodniu
przykładowe zamówienia
Zobacz szczegóły
Jedyne, co się zmienia
Kopiuj CSS
Odczyt i zapis zmiennych z JavaScript
Przykładowe pole poniżej używa var(--demo-accent, #2563eb) dla obramowania i var(--demo-radius, 8px) dla narożników. Ustaw dowolną z tych zmiennych, a pole się zmieni.
Nazwa zmiennej
Nowa wartość
Nazwa custom property zaczyna się od dwóch myślników, na przykład --demo-radius.
Odczytaj
Ustaw
Usuń
Wypróbuj --demo-radius
Przykładowe pole
(nie ustawiono)
Zacznij za darmo · Bez karty kredytowej