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 funkcja, dlatego nie jest wspierana przez wszystkie przeglądarki. Jeśli jesteś ciekawy, na czym zadziała, to zapraszam Cię 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 sposób prezentuje się deklaracja:

body 
{
  --gray: #303030;
}

Tak oto 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 wpisać, aby jej użyć prezentuje się w ten sposób:

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

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. Dlatego nie bez przyczyny wszystko co się w nich znajduje podlega wymienionej zasadzie kaskadowości, również to o czym mówimy dzisiaj.

W poprzednim akapicie zadeklarowaliśmy naszą zmienną w konkretnym znaczniku, jakim jest body. Co to oznacza w praktyce? Każda zmienna działa w obrębie znacznika, w którym została umieszczona oraz jego 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ć naszą zmienną w kodze ogólnym, a później podmienić ją dla konkretnych rozdzielczości. Wygląda to na przykład 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 element, w którym jej użyliśmy zmieni swój kolor na #444444.


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

Tu niestety nie jest tak przyjemnie, bo w praktyce jedyną możliwością jest zapisanie 2 takich samych linii kodu CSS, pierwszej bez, a drugiej z naszą zmienną. Dla przykładu może to przybrać taką postać:

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

Podsumowanie.

Ciekawi mnie na ile CSS stanie się podobny do standardowych języków programowania, dostając takie funkcje jak omówione dziś zmienne. Mam nadzieję, że dzięki temu poradnikowi mogłeś poznać je lepiej!

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 *