zmienne w css

Paweł Niedźwiecki

Właściwości niestandardowe CSS (znane również jako zmienne) to duża korzyść dla programistów front-end. Wprowadzają moc zmiennych do CSS, co skutkuje mniejszą liczbą powtórzeń, lepszą czytelnością oraz większą elastycznością.

Ponadto zmienne w CSS są w rzeczywistości częścią DOM. Zasadniczo są one podobne do zmiennych w preprocesorach takich jak SASS czy LESS, których też warto się nauczyć, jeśli planujesz zostać front-end developerem. W tym artykule postaram się pokazać Ci w 5 minut, czym są zmienne w CSS.

Co muszę umieć przed przystąpieniem do tego artykułu?

  • znać bardzo dobrze HTML

  • znać dobrze CSS

  • znać podstawy JavaScript

Jeżeli, któreś z wymienionych wymagań stanowi kłopot, polecam Ci zerknąć na kurs tutaj

Po co uczyć się zmiennych w CSS?

Istnieje wiele powodów, dla których warto używać zmiennych w CSS. Jednym z najbardziej przekonujących jest to, że używanie ich zmniejsza liczbę powtórzeń w arkuszu stylów.

Spójrz sam na stary sposób:

1 2 3 4 5 6 7 #title { color: "#A6A6A6"; } .box { color: "#A6A6A6"; }

nowy sposób : 

1 2 3 4 5 6 7 8 9 10 11 :root{ --gray: "#A6A6A6"; } #title { color: var(--gray); } .box { color: var(--gray); }

W powyższym przykładzie znacznie lepiej jest utworzyć zmienną dla koloru #A6A6A6, niż powtarzać to tak, jak było to robione starym sposobem.

Utworzenie zmiennej nie tylko ułatwia odczytanie kodu, ale zapewnia także większą elastyczność na wypadek, gdybyś chciał podmienić ten kolor na całej stronie.

Takie rozwiązanie od dawna jest dostępne w preprocesorach takich jak SASS czy LESS. Zmienne CSS mają naprawdę sporo zalet.

  1. Zmienne CSS nie wymagają transpilacji do działania, ponieważ są natywne dla przeglądarki. Nie potrzebujesz zatem żadnej konfiguracji, aby z nich korzystać tak jak w wypadku SASS czy LESS. Dzięki temu próg wejścia do zmiennych w arkuszach stylów jest obniżony. 
  2. Zmienne CSS są dostępne w DOM, a to otwiera Ci mnóstwo korzyści, które zostaną omówione w dalszej części tego artykułu.

Jeżeli zatem wiesz już, do czego służy nauka zmiennych w CSS, zacznijmy się ich teraz uczyć!

Deklarowanie pierwszej zmiennej CSS

Aby zadeklarować zmienną, musisz najpierw zdecydować, w jakim zakresie powinna ona istnieć. Jeśli chcesz, aby była dostępna globalnie, po prostu zdefiniuj ją w :root pseudoklasie. Pasuje do elementu głównego w drzewie dokumentu (zwykle do <html> znacznika).

Ponieważ zmienne są dziedziczone, spowoduje to, że zmienna będzie dostępna w całej aplikacji, gdyż wszystkie elementy DOM są potomkami tagu <html>.

1 2 3 4 :root { --main-color: #A6A6A6; --main-color-bg: #262626 }

Jak widać, deklaruje się zmienną w taki sam sposób, w jaki ustawia się dowolną właściwość CSS. Zmienna zawsze jednak musi zaczynać się od dwóch myślników.

Aby uzyskać dostęp do zmiennej, musisz użyć var() funkcji i podać nazwę zmiennej jako parametr.

1 2 3 4 5 6 7 body { background-color: var(--main-color-bg); } p{ color: var(--main-color); }

A to da nam takie kolorki:

Deklarujemy zmienną ,,lokalną"

Możesz także tworzyć zmienne lokalne, które są dostępne tylko dla elementu, w którym jest zadeklarowana i dla jego elementów podrzędnych. Ma to sens, jeśli wiesz, że zmienna będzie używana jedynie w określonej części (lub częściach) aplikacji.

Dla przykładu możesz mieć pole ostrzegawcze, które używa specjalnego rodzaju koloru, który nie jest używany w innych miejscach w aplikacji. W takim wypadku warto unikać umieszczania go w zakresie globalnym:

1 2 3 .alert { --alert-color: #ff6f69; }

Ta zmienna może być teraz używana przez jej dzieci:

1 2 3 4 .alert p { color: var(--alert-color); border: 1px solid var(--alert-color); }

Jeżeli spróbujesz użyć zmiennej alert-color w innym miejscu swojej aplikacji, na przykład na pasku nawigacyjnym, wtedy po prostu nie zadziała. Przeglądarka zwyczajnie zignoruje tę linię CSS.

Łatwiejsza reakcja na zmienne

Dużą zaletą zmiennych CSS jest fakt, że mają dostęp do DOM. Nie jest tak w przypadku LESS lub SASS, ponieważ ich zmienne są kompilowane do zwykłego CSS.

W praktyce możemy to wykorzystać na przykład przy reakcji na zmianę szerokości ekranu:

1 2 3 4 5 6 7 8 9 :root { --main-font-size: 16px; } media all and (max-width: 600px) { :root { --main-font-size: 12px; } }

Dzięki tym czterem prostym wierszom kodu zaktualizowałeś główny rozmiar czcionki w całej aplikacji wyświetlanej na małych ekranach. Całkiem fajnie, prawda? :)

Jak uzyskać dostęp do zmiennych za pomocą JavaScript?

Jak już kilka razy wspomniałem, ogromną zaletą zmiennych CSS, jest fakt, że są dostępne w DOM. Można zatem uzyskać do nich dostęp za pomocą JavaScript, a nawet je aktualizować. Na przykład na podstawie interakcji użytkownika. Jest to idealne rozwiązanie, jeśli chcesz dać swoim użytkownikom możliwość zmiany witryny (na przykład dostosowywania koloru czcionki).

Kontynuujmy na przykładzie z początku tego artykułu. Pobranie zmiennej CSS w JavaScript wymaga trzech wierszy kodu.

1 2 3 4 5 var root = document.querySelector(':root'); var rootStyles = getComputedStyle(root); var mainColor = rootStyles.getPropertyValue('--main-color'); console.log(mainColor);

Aby zaktualizować teraz zmienną CSS, wystarczy po prostu wywołać setProperty na elemencie, w którym zmienne zostały zadeklarowane. Jako pierwszy parametr podajemy nazwę zmiennej, którą chcemy modyfikować, a nową wartość jako drugi parametr.

1 2 root.style.setProperty('--main-color', '#262626') root.style.setProperty('--main-color-bg', '#A6A6A6')

Ten główny kolor może zmienić cały wygląd Twojej aplikacji, więc jest idealny, aby umożliwić użytkownikom ustawienie motywu witryny.

Aktualizując pojedynczą zmienną, możesz zmienić kolor paska nawigacyjnego, tekstu, elementów i czego tylko zapragniesz! Brzmi fantastycznie, co? :)

Jak wygląda wsparcie przeglądarek?

Obecnie 77% globalnego ruchu w witrynie obsługuje zmienne CSS. Osobiście używam zmiennych CSS na większości moich witryn, jako iż moi odbiory to głównie osoby wykorzystujące najnowsze przeglądarki. Zanim jednak podejmiesz decyzję o użyciu zmiennych CSS, polecam zerknąć pod Ten adres. Tutaj sprawdzisz, które przeglądarki obsługują aktualnie zmienne CSS.

Paweł Niedźwiecki

elektronika, programowanie, biznes, podróże

więcej
  • praca

    Software Developer

  • lokalizacja

    Warszawa, Polska

  • wiek

    31

Więcej odPaweł

  • Add article