Zrozumienie zmiennych CSS (i jak ich używać)

Opublikowany: 2025-07-13

Zmienne CSS są jak składniki projektowania wielokrotnego użytku. Definiujesz je raz, jako kolorowe marki, rozmiary czcionek lub odstępy, a następnie używasz ich tam, gdzie potrzebne. Oszczędzają cię przed wpisywaniem tych samych kodów sześciokątnych i wartości pikseli w różnych sekcjach.

Ich największą korzyścią jest to, jak łatwo są ich aktualizacja. Jeśli zaktualizujesz zmienną raz, każde używane miejsce również odzwierciedla zmiany. Tak więc nie tylko unikasz ręcznego powtarzania tych samych wartości w wielu sekcjach, ale możesz również dostosować wygląd całej witryny, zmieniając tylko jedną wartość.

Tutaj jest jeszcze lepiej: z Divi 5 nie musisz pisać żadnego kodu, aby używać zmiennych CSS. Zmienne projektowe Divi pozwalają użyć ich w wizualnym, bez kodu przepływu pracy. Ciekawe, jak to działa? Czytaj dalej.

Spis treści
  • 1 Co to są zmienne CSS?
    • 1.1 Jak działają zmienne CSS
    • 1.2 Zrozumienie zmiennych CSS kaskada
    • 1.3 Dodanie wartości awarii
  • 2 Nie kodowy sposób korzystania z zmiennych CSS w Divi 5
    • 2.1 Zdefiniuj zmienne CSS w Divi 5
  • 3 Jak Divi 5 sprawia, że CSS zmienne przepływy pracy
    • 3.1 1. Utwórz swoje ramy projektowe
    • 3.2 2. Użyj ustawień grupowych opcji do elastycznego stylizacji
    • 3.3 3. Zadekstaj niestandardowe zmienne CSS w celu uzyskania większej kontroli
  • 4 Divi oferuje wbudowane podejście do zmiennych CSS

Co to są zmienne CSS?

Pomyśl o zmiennych CSS jako niestandardowych etykietach, które tworzysz dla własnych nawyków projektowych. Jaki jest twój promień graniczny obrazu? Ile odstępów zazwyczaj zostawiasz między sekcjami? Czy masz podpisany kolor przycisku, którego używasz wszędzie? Możesz zamienić wszystkie te unikalne style w zmienne CSS.

To nie są wartości, które przeglądarka domyślnie zna. Wszystko jest niestandardowe. Ty decydujesz o nazwie, przypisujesz preferowaną wartość i używasz jej gdziekolwiek chcesz. To tak, jakby stworzenie własnego skrótów, które sprawia, że styl jest szybszy, czystszy i znacznie łatwiejszy do aktualizacji później.

Weźmy przykład. Załóżmy, że chcesz, aby głównym kolorem Twojej witryny był #007bff. Zadeklarowałbyś to w ten sposób:

:root {
--primary-color: #007bff;
}

Tutaj „–Primary” to twoja zmienna nazwa, a „#007bff” to jego wartość. Właśnie zapisałeś kolor w niestandardowej etykiecie, którą przeglądarka może teraz rozpoznać.

Aby go użyć, nie przepisujesz kodu sześciokątnego. Wywołujesz zmienną w funkcji var () tak:

 button {
background-color: var(--primary-color);
}

Ta jedna linia kodu zapewnia, że przycisk zawsze pobiera wartość z koloru pryminacyjnego.

Teraz możesz go używać tam, gdzie potrzebne jest, a kiedy nadszedł czas, aby zaktualizować kolor marki, nie ma potrzeby przeglądania dziesiątek plików. Po prostu zmień zmienną raz, a każdy element, w którym jest używany, jest aktualizowany automatycznie. Na przykład twoje przyciski, nagłówki i granice używają-kolorowy kolor. Jedna edycja aktualizuje je wszystkie.

W ten sposób zmienne CSS upraszczają aktualizacje całej witryny.

Jak działają zmienne CSS

Aby zadeklarować zmienną CSS, podstawowa składnia wygląda tak:

.root {
--name: value;
} 

Kilka rzeczy do zanotowania. Po pierwsze, zmienna CSS zawsze zaczyna się od dwóch dystansów ( -). W ten sposób przeglądarka wie, że jest niestandardowa, coś, co zdefiniowałeś dla swojego systemu projektowego.

Wbudowane właściwości CSS, takie jak rozmiar czcionki, kolor lub wyściółka, mają już znaczenie. Przeglądarka dokładnie wie, co z nimi zrobić. Ale właściwości niestandardowe to puste etykiety, dopóki nie przypiszesz ich wartości. Tworzysz własne zasady projektowania w projekcie strony internetowej, na przykład-kolorowy, i mówisz przeglądarce, co oznacza.

Tam, gdzie definiujesz zmienne CSS, również ma dużą różnicę.

Kiedy umieścisz go wewnątrz: selektora korzenia (tak jak zrobiliśmy powyżej), staje się globalny. Oznacza to, że możesz użyć zmiennej na dowolnej stronie i elemencie. To dlatego, że: root celuje w element najwyższego poziomu HTML, zwykle tag <html>.

Ale jeśli zdefiniujesz tę samą zmienną w określonej klasie lub selektorze, działa ona tylko w jednym miejscu. Tak:

 .card {
--bg-color: #f4f4f4;
} 

Tutaj kolor BG ma zastosowanie tylko w selektorze .Card. Spróbuj użyć go gdzie indziej i nie pojawi się. Na przykład poniżej zobaczysz dwie karty.

Lokalnie zadeklarowana zmienna CSS

Karta 1 wykorzystuje lokalnie zdefiniowaną zmienną –Card-BG zadeklarowaną wewnątrz pojemnika .Card. Ta zmienna działa tylko w tym pojemniku. Nie ma zastosowania na karcie 3.

Lokalnie zdefiniowana zmienna CSS nie będzie działać na innych pojemnikach

Z drugiej strony karta 2 wyciąga tło z koloru –Global, który jest zdefiniowany w: root. Właśnie dlatego karta 4 również podnosi ten sam kolor. Ma dostęp do zmiennej globalnej.

Zmienna root CSS działa

Jako najlepsza praktyka, jeśli chcesz spójności w całej witrynie, zawsze definiuj wartości CSS w: root. Co jeśli zdefiniowałeś zmienną lokalnie i zapomniałeś o tym, ale teraz nie działa zgodnie z oczekiwaniami? Będziesz to rozwiązywać, ustawiając wartość awarii. Za chwilę porozmawiamy o tym.

Zrozumienie zmiennych CSS kaskady

Być może znasz termin „kaskada”. Cóż, zmienne CSS również kaskady, ale co to oznacza?

Jeśli zmienna jest zdefiniowana zarówno na całym świecie (w: root), jak i lokalnie (wewnątrz klasy lub kontenera), przeglądarka zawsze będzie używać jednego bliżej elementu. W ten sposób działa kaskad w CSS. Bliższe zasady mają pierwszeństwo.

I właśnie tak działa ciemny tryb.

Na przykład możesz zdefiniować –Text kolor: czarny w: root. Ale w pojemniku z trybem. Kiedy więc użytkownik przełącza opcję Dark Mode, przeglądarka użyje wersji lokalnej w trybie .Dark, nawet jeśli nazwa zmiennej pozostaje taka sama.

Przykład trybu ciemnego

Pozwala to zachować spójność nazewnictwa, jednocześnie dostosowując style na podstawie kontekstu. To jeden ze sposobów, w jaki zmienne CSS wykraczają poza prostą możliwość ponownego użycia. Dostosowują się na podstawie tego, gdzie i jak są używane.

Dodanie wartości awarii

Czasami możesz odwoływać się do zmiennej CSS, która nie jest dostępna. Być może został zdefiniowany tylko w określonej sekcji lub został usunięty przez pomyłkę. Kiedy tak się dzieje, przeglądarka nie wie, co robić. Style zależne od tej zmiennej po prostu nie zostaną zastosowane.

Aby temu zapobiec, możesz dodać wartość awarii bezpośrednio wewnątrz funkcji var (). Służy jako kopia zapasowa na wypadek, gdyby brakowało oryginalnej zmiennej. Oto jak to działa:

 h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} 

To mówi przeglądarce, aby użyła-koloru na czele, jeśli istnieje. Jeśli nie, zamiast tego użyj czarnego (#000).

Zderzenia są szczególnie przydatne przy budowaniu komponentów wielokrotnego użytku lub pracy w wielu sekcjach, w których zmienne nie zawsze mogą być dostępne. Utrzymują stabilny i spójny projekt.

Możesz nawet łańcuch, takie jak kolor: var (–Accent kolor, var (–Primary-color, #333));

Tutaj przeglądarka najpierw sprawdza –Accent w kolorze. Jeśli go brakuje, próbuje-kolorowy kolor. Jeśli to również brakuje, domyślnie jest to #333. Daje to Twojemu stylowi sieć bezpieczeństwa, dzięki czemu nadal renderują prawidłowo, nawet jeśli brakuje pewnych wartości.

Bez kodowania sposobu korzystania z zmiennych CSS w Divi 5

Wszystko, co widziałeś na temat zmiennych CSS (globalna kontrola, wartości wielokrotnego użytku, logika kaskadowa) brzmi świetnie, ale jest również wyposażona w haczyk: musisz pisać i zarządzać kodem. Dla wielu projektantów nie jest to idealne. Co jeśli wolisz projekt wizualny? Oznacza to, że nie możesz używać zmiennych CSS, prawda? Zło.

Divi 5 daje szybszy, bardziej wizualny sposób pracy z tą samą logiką zmiennych CSS. Wprowadza zmienne projektowe, bez kodu alternatywnego dla zmiennych CSS wbudowanych bezpośrednio w budownicę Divi.

Subskrybuj nasz kanał YouTube

Zmienne projektowe ( takie jak zmienne CSS) to wartości wielokrotnego użytku, które definiujesz raz i używasz w całej witrynie . Różni się, jak to robisz. Nie definiujesz ich w arkuszu stylów swojej witryny, ale w zmiennym menedżerze Inside Divi Builder, wizualnie.

Zmienny menedżer w Divi 5

Podobnie jak zmienne CSS, podajesz zmienną projektową nazwę i przypisujesz wartość. Po zapisaniu staje się dostępny w dowolnym module obsługującym tę właściwość.

Zastosowanie zapisanej zmiennej jest również łatwe. Po prostu zlokalizuj ikonę Menedżera zmiennych , unosząc się nad opcją ustawień modułu, klikając ją, aby wypełnić wszystkie zapisane zmienne i wybierając tę, którą chcesz zastosować.

Najlepszą częścią zmiennych projektowych jest to, że nie tylko projektują wartości, ale można również zapisać powtarzalne wartości treści, takie jak obrazy, linki i struny tekstowe. W ten sposób skutecznie zarządzasz powtarzanymi treściami, ponownie wykorzystując wspólne elementy treści w całej witrynie bez pracy ręcznej.

Zapisz powtarzalne wartości treści w zmiennych projektowych

Dowiedz się wszystkiego o zmiennych projektowych Divi 5

Zdefiniuj zmienne CSS w Divi 5

Czy te średnie zmienne projektowe zastępują zmienne CSS? Nie do końca.

Zmienne projektowe doskonale nadają się do przechowywania używanych wartości, takich jak kolory marki, ale nie każdy styl musi być globalny. Nie zawsze będziesz chciał zapisać każdą drobną poprawkę jako zmienną projektową, zwłaszcza gdy jest ona unikalna dla jednej strony.

Załóżmy, że tworzysz stronę docelową z niestandardową sekcją bohatera. Wysokość różni się od czegokolwiek innego na stronie i mało prawdopodobne jest, aby ją ponownie użyć. Oszczędzanie tego jako zmiennej projektowej nie jest najlepszym wykorzystaniem Twojej globalnej biblioteki. W takim przypadku zdefiniowanie zmiennej CSS bezpośrednio w ustawieniach strony jest czystszym wyborem.

To samo dotyczy złożonych lub jednorazowych układów. Być może potrzebujesz niestandardowego koloru podświetlenia lub wartości odstępów specyficznej dla układu, która jest istotna tylko w tym kontekście. Zamiast zatemać system ze zmiennymi, których nigdy nie użyjesz, możesz zdefiniować zmienne CSS w miejscu, w którym ich potrzebujesz.

Nie chcemy, abyś zastępował zmienne CSS zmiennymi projektowymi. Chcemy, abyś używał najlepszych z obu.

Dlatego Divi 5 ułatwia definiowanie zmiennych CSS. Możesz łatwo zadeklarować własne zmienne CSS w ustawieniach strony> Zaawansowane> niestandardowe CSS , tak jak w zwykłym CSS.

Zdefiniuj zmienne CSS w Divi 5

Ale upraszczamy ich aplikację dla Ciebie. Po zdefiniowaniu możesz użyć tych zmiennych na tej stronie. Przejdź do dowolnego modułu, wybierz CSS VAR z rozwijanej jednostek zaawansowanych i wprowadź nazwę zmiennej wewnątrz funkcji var ().

Takie podejście zapewnia elastyczność w razie potrzeby, nie zmuszając Cię do zaangażowania wszystkiego do systemu zmiennej projektowania wizualnego. Jest to równowaga między strukturą a wolnością twórczą.

Używanie zmiennych CSS w Divi 5

Jak Divi 5 sprawia, że zmienne przepływy pracy CSS

Teraz, gdy wiesz, czym są zmienne CSS i jak Divi 5 wspiera je wizualnie, oto dlaczego to naprawdę ma znaczenie. To nie tylko dlatego, że Divi daje dwa sposoby korzystania z zmiennych CSS. To dlatego, że sprawia, że integrują się płynnie z przepływem pracy.

Możesz łatwo użyć zmiennych CSS z potężnymi funkcjami, takimi jak zmienne projektowe, ustawienia o grupie opcji i zaawansowane jednostki. Nadal otrzymujesz całą elastyczność i skalowalność tradycyjnego CSS, ale bez pisania jednego wiersza kodu, chyba że zdecydujesz się.

Przejdźmy przez to, jak Divi 5 ożywia ten przepływ pracy.

1. Utwórz swoje ramy projektowe

Zmienne projektowe są naprawdę potężne, ponieważ możesz wizualnie zbudować całą framework projektu, więc styl strony wymaga tylko kilku kliknięć. Zalecamy rozpoczęcie od podstawowych elementów projektu, takich jak rozmiary czcionek, jednostki odstępów i kolory marki, dzięki czemu masz wszystkie w jednym miejscu.

Następnie możesz również zapisywać często używane treści, takie jak struny tekstowe, adresy URL i obrazy. Na przykład wspólny motyw podstawowy, który powtarza się w różnych sekcjach, linkach mediów społecznościowych, e -mailu, adresu itp.

Po wprowadzeniu ram wszystko staje się łatwiejsze. Nie musisz wracać do arkusza stylów głównych, aby znaleźć zmienną lub zapamiętać dokładne nazwy. Divi organizuje je dla Ciebie: kolory na karcie kolorów , czcionki na karcie czcionki i wszystkie dostępne wewnątrz menedżera zmiennego .

Zapisane zmienne są dobrze zorganizowane w menedżerze zmiennych

A kiedy Twoja witryna potrzebuje aktualizacji projektowej, nie marnujesz czasu na edycję modułu według modułu ani polowania przez długi arkusz stylów. Kiedyś zaktualizujesz zapisaną wartość w menedżerze zmiennym , a Twoje zmiany mają zastosowanie natychmiast w każdej instancji.

Ta sama kontrola poziomu CSS, ale bez potrzeby zapamiętywania, pisania lub debugowania czegokolwiek.

2. Użyj ustawień grupowych opcji do elastycznego stylizacji

Presegatory grup opcji zapewniają bardziej szczegółową kontrolę nad systemem projektowym. Zamiast stosować pojedynczy zestaw stylów w całej witrynie, możesz tworzyć wiele grup opcji projektowych dla różnych przypadków użycia, wszystkie zbudowane z tych samych podstawowych zmiennych projektowych.

Tutaj masz style warstwowe. Raz w menedżerze zmiennej definiujesz swoje podstawowe wartości, a następnie tworzysz różne ustawienia wstępne, które wyciągają się z tych wartości, ale zastosuj je na nieco inny sposób. Jeśli kiedykolwiek zaktualizujesz zapisaną wartość zmienną, zmiana natychmiast odzwierciedla wszystkie twoje ustawienia i moduły, w których są stosowane.

Ten ustawiony system projektowy pomaga tworzyć nieograniczone kombinacje stylizacji. Na przykład możesz mieć jeden styl nagłówka dla swojego bohatera strony głównej, a drugi dla tytułów blogów, zarówno używających tej samej zmiennej rozmiaru czcionki, ale z różnymi odstępami, ciężarkami lub transformami tekstowymi.

Struktura pozostaje czysta. Stylizacja pozostaje spójna. A w razie potrzeby możesz zastąpić dowolne ustawienie na poziomie modułu. Dlatego otrzymujesz kontrolę całego systemu bez utraty swobody twórczej.

3. Zadekstaj niestandardowe zmienne CSS, aby uzyskać większą kontrolę

Jak wiecie, Divi nie blokuje cię przed zaawansowaną kontrolą. Jeśli chcesz zdefiniować własne zmienne CSS, możesz to zrobić absolutnie za pośrednictwem ustawień strony> Zaawansowane> niestandardowe CSS. Ale to nie jest zabawna część.

Zabawne jest to, że pozwala korzystać z potężnych funkcji CSS, takich jak Clamp () i Cal () (dzięki zaawansowanym jednostkom) w celu wizualnego budowania płynów i responsywnych układów. Możesz także użyć zapisanych zmiennych CSS jako wartości dla zmiennych projektowych.

Pomaga to zbudować bardziej powiązany system projektowy. Twoja logika CSS i stylizacja wizualna nie istnieją już w osobnych silosach. Możesz zdefiniować wartość raz w CSS i wyciągnąć z niej wizualnie, gdzie potrzebne jest. Utrzymuje płyn przepływu pracy, skalowalny i łatwy w utrzymaniu.

Może się okazać to przytłaczające, ale kiedy zrozumiesz, jak to działa razem, nie ma powrotu. Zmienia sposób projektowania, myślenia i budowy. To, co zaczyna się jako system zmiennych, szybko staje się twoim językiem projektowym. I tak, te narzędzia są potężne, ale mają być ukształtowane wokół twojego procesu. Nie spiesz się, zbadaj, co pasuje do twojego stylu i zbuduj przepływ pracy, który działa dla Ciebie.

Divi oferuje wbudowane podejście do zmiennych CSS

Projektowanie ze zmiennymi CSS oznaczało wybór między elastycznością a złożonością. Divi 5 usuwa to i wprowadza pełną moc zmiennych, kontrolę wizualną, aktualizacje całej witryny i logikę warstwową w intuicyjny i skalowalny przepływ pracy.

Nie musisz wybierać między niestandardowym CSS a projektem bez kodu. Możesz mieszać, dopasować i ewoluować swój system w miarę wzrostu projektów. A kiedy zobaczysz, jak gładkie i potężne może być, trudno sobie wyobrazić budowanie innego sposobu. Ale w tym celu musisz przejąć kontrolę w swoich rękach.

Wypróbuj Divi 5 dla siebie i zbuduj system projektowy, który z tobą współpracuje, a nie przeciwko tobie.

Pobierz Divi 5learn więcej o Divi 5