Zmienne znane z programowania. Teraz w czystym CSS!

Czy wiedziałeś o tym, że w CSS można deklarować oraz później wykorzystywać zmienne? Dokładnie! A to wszystko bez używania jakichkolwiek preprocesorów, takich jak Sass czy Less!

Mogą się świetnie sprawdzić podczas chociażby kodowania kolorów, gdzie nie musimy kopiować każdego kodu szesnastkowego w celu jego użycia!


Wsparcie poszczególnych przeglądarek.

Oczywiście zmienne w CSS to stosunkowo świeża oraz niestabilna funkcja i przez to nie jest wspierana przez wszystkie przeglądarki. Jeśli jesteś ciekawy, na czym zadziała, to zapraszam na tę stronę. Tam wszystko zostało wyszczególnione 🙂


No dobrze, ale jak właściwie tego używać?

Tak jak w językach programowania, tak i tu inaczej wygląda zadeklarowanie zmiennej oraz jej użycie. W ten oto sposób prezentuje się deklaracja:

body 
{
  --gray: #303030;
}

Tak powstaje nasz przykład o nazwie gray oraz wartości #303030. Oczywiście nie zapominajmy, że nazwy zmiennych w CSS są poprzedzone dwoma myślnikami. Z kolei kod, który powinniśmy stworzyć, aby ją użyć prezentuje się w ten sposób:

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

W miejscu, w którym chcemy użyć naszej zmiennej, wpisujemy charakterystyczne słowo var, po czym całość umieszczamy w nawiasie.


Kaskadowość zmiennych w CSS.

Kaskadowe arkusze stylów – tak rozwija się skrót CSS. Oczywiście wskazuje to na to, że wszystko co się tam znajduje podlega wymienionej już zasadzie kaskadowości, również zmienne.

W poprzednim akapicie zadeklarowaliśmy naszą zmienną w konkretnym znaczniku, jakim jest body. Co to oznacza w praktyce? Każda zmienna, która znajdzie się w naszym kodzie, działa w obrębie znacznika, w którym została umieszczona oraz jej potomkach.

Może ponownie posłużę się przykładem 🙂 Zadeklarujemy naszą zmienną w znaczniku header:

header
{
  --gray: #303030;
}

Teraz umieśćmy ją w dwóch miejscach na stronie. Tutaj:

header div 
{
  background-color: var(--gray); /* kod zadziała */
}

…oraz tu:

footer
{
  background-color: var(--gray); /* kod nie zadziała */
}

Jak widać tylko w przypadku pierwszego użycia nasza zmienna będzie uznana, ponieważ została zadeklarowana w nagłówku, a tym samym footer nie wie, że coś takiego istnieje. Z kolei div, który jest potomkiem nagłówka zna tę zmienną.


Media queries.

Kaskadowość działa również podczas stosowania media queries. Możemy utworzyć zmienną dla każdej z rozdzielczości, a później zmienić ją dla konkretnego urządzenia. Wygląda to w ten oto sposób:

body 
{
    --gray: #303030;
}

div
{
    background-color: var(--gray);
}

@media screen and (max-width: 500px)
{
    body 
    {
        --gray: #444444;
    }
}

W tym miejscu deklarujemy zmienną gray, której domyślna wartość będzie równa #303030. Z kolei gdy wejdziemy na daną stronę mając ekran mniejszy od 500px, to div, w której jej użyliśmy zmieni swój kolor na #444444.


A co jeśli zmienne nie są obsługiwane przez przeglądarkę?

Tu z pomocą przychodzi nam inna funkcja, dzięki której możemy zapisać 2 takie same linie CSS, pierwszą bez, a drugą z naszą zmienną. Dla przykładu może to przybrać taką postać:

div
{
    background-color: #303030;
    background-color: var(--gray);
}

Podsumowanie.

Ciekawe jak CSS będzie wyglądać wkrótce, skoro cały czas zyskuje nowe funkcje. Mam nadzieję, że dzięki temu poradnikowi mogłeś poznać jedną z nich, czyli zmienne!

Oczywiście jeśli masz jakieś pytania lub sugestie, to zapraszam Cię do komentowania, a jeśli znasz kogoś, dla kogo ten artykuł mógłby okazać się pomocny, to będę bardzo wdzięczny, jeśli prześlesz go do niego 🙂

Programista zakochany w JavaScript'cie, twórca stron internetowych i jak widać od niedawna bloger 🙂
2 comments Add yours
  1. “background-color: #303030; background-color: var(–gray);”
    Pytanie tylko jaki sens ma takie powielanie zapisów? Jeśli musimy wspierać starsze przeglądarki to chyba lepiej pozostać przy standardowo kompilowanym sass/less, a zmienne CSS używać tylko w projektach dla nowych środowisk. Ale to tylko moja subiektywna ocena, nie mniej jednak CSS idzie w dobrą stronę, szkoda tylko, że znowu powracamy do ciągłego mieszania HTML z JS zamiast stosować jasno rozdzielone warstwy HTML-CSS-JS jak ma to miejsce w back-endzie (model-kontroler-widok)… we froncie chyba nie do końca rozdzielanie warstw jest widoczne i chętnie stosowane…

    1. Oczywiście w tym przypadku nie ma to większego sensu, napisałem o tym, ponieważ chciałem wytłumaczyć temat zmiennych w całości i jak najprościej 🙂

      Dlatego też cały wpis został stworzony bardziej dla pokazania ciekawostki, jaką są zmienne w CSS oraz tego w jakim kierunku idzie całe stylowanie witryn internetowych.

      Dziękuję Ci Tomku za tyle świetnych przemyśleń! Ciekawe jak to wszystko się rozwinie 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *