CSS_Variables

WTF is… CSS variables

„Ten kolor na stronie zmieńmy na nieco jaśniejszy” – to zdanie, którego boją się wszyscy, kiedy usłyszą je pod koniec prac nad stroną. W większości przypadków zapowiada ono godziny stracone na przeszukiwaniu CSS-a i zmienianiu kodów kolorów w wielu miejscach, mniej lub bardziej automatycznie, ale zawsze niezwykle irytująco. Niedługo sytuacja ta ulegnie zmianie!

Z pomocą przybywają nam CSS variables, czyli obsługa zmiennych w CSS. Oczywiście, zmienne w CSS teoretycznie były już dostępne poprzez narzędzia takie, jak Sass, ale wyższości rozwiązania natywnego nad wszelakimi „piórkami”, mam nadzieję, drogim czytelnikom nie trzeba wyjaśniać.
CSS variables umożliwiają nam zdeklarowanie zmiennych (np. kolorów, ale niekoniecznie – mogą to być dowolne wartości, np. 10px, 1em, "Open Sans", sans-serif;… Słowem – wszystko), którymi następnie będziemy posługiwać się podczas pisania kodu CSS zamiast wielokrotnego podawania tej samej wartości. Jednokrotna zmiana wartości zadeklarowanej zmiennej spowoduje zmianę w każdym parametrze, do którego wartość zmiennej została przypisana.

Deklarowanie zmiennych

Deklarowanie zmiennych jest bardzo proste. Deklarujemy je w pseudoselektorze ::root, o, tak:

::root {
    --nazwazmiennej: wartość;
}

Używanie zmiennych

Używanie zmiennych również jest niezwykle proste. Aby wartość zmiennej została użyta, jako wartość danej właściwości należy podać var(), w nawiasie umieszczając nazwę zmiennej, jak na poniższym przykładzie:

CSS

::root {
    --kolorglowny: #6CC6EC;
}
.obiekt1 {
    background-color: var(--kolorglowny);
}
.obiekt2 {
    background-color: white;
    color: var(--kolorglowny);
}

HTML

<div class="obiekt1">Obiekt 1</div>
<div class="obiekt2">Obiekt 2</div>

Efekt

Obiekt 1
Obiekt 2

Prawda, że proste? Ale nie ma problemu, zaraz nieco to utrudnimy. :)

Dziedziczenie zmiennych

Nikt nie napisał, że koniecznie musimy deklarować zmienne do pseudoklasy ::root, czyli, jak sama nazwa wskazuje, najgłówniejszej z głównych. :) Zmienną możemy przypisać do dowolnego elementu, a jej wartość „przejmą” jego dzieci. Przykładowo:

CSS

.dwa {
    --kolorglowny: #6CC6EC;
}
.trzy {
    --kolorglowny: #E74D6D;
}
div {
    background-color: var(--kolorglowny);
}

HTML

<div class="jeden">
    jeden
    <div class="dwa">
        dwa
        <div class="trzy">trzy</div>
        <div class="cztery">cztery</div>
    </div>
</div>

Efekt

  • Element .jeden, pomimo przydzielenia jako koloru tła wartości zmiennej --kolorglowny, nie będzie miał żadnego koloru, ponieważ ani on, ani żaden z jego rodziców nie ma zadeklarowanej wartości zmiennej.
  • Element .dwa będzie niebieski, bo zadeklarowaliśmy zmienną --kolorglowny właśnie w tym elemencie.
  • Element .trzy będzie różowy bo pomimo, iż jest potomkiem elementu .dwa, sam ma zadeklarowaną wartość zmiennej o tej samej nazwie, co nadpisuje jej wartość.
  • Element .cztery będzie niebieski, bo przejmie wartość zmiennej od elementu-rodzica .dwa.
jeden

dwa

trzy
cztery

Na szczęście to koniec utrudnień w teorii. :) Resztę pokomplikujemy już sami:
Q3cUg29;)

Narzędzie, które Wam ostatnio polecałem podpowiada mi, że póki co opisaną nowością pobawimy się tylko Firefoksie 31 wzwyż, ale to z pewnością w niedalekim czasie się zmieni.

Miłego kodzenia! :)