Zmienne w czystym CSS

W tym artykule przedstawię nowość w CSS jaką jest możliwość deklarowania zmiennych. Dzięki zmiennym nie musimy wielokrotnie w różnych miejscach naszego kodu CSS deklarować tej samej wartości właściwości obiektu, a po prostu przypisać tę wartość do zmiennej, którą później możemy wykorzystać w różnych elementach. Dzięki temu chcąc zmienić daną wartość zrobimy to tylko w jednym miejscu – tam gdzie została zadeklarowana zmienna.

Wszystkie nowoczesne przeglądarki (oprócz Internet Explorer) wspierają tę właściwość.

Tworzenie zmiennych w CSS

Tworzenie zmiennych w CSS jest bardzo proste i wygląda w ten sposób:

-–main-color: green;

Wykorzystać zmienną w kodzie możemy w taki sposób:

p{
  color: var(-–main-color);
}

Dzięki temu element (akapit) będzie miał kolor zadeklarowany jako zmienna (w tym przypadku zielony).

Przykład użycia

Załóżmy, że chcemy stworzyć stronę z 4 akapitami, każdy w innym kolorze, a kod html wygląda w ten sposób:

<p class="paragraph-1">Lorem ipsum</p>
<p class="paragraph-2">Lorem ipsum</p>
<p class="paragraph-3">Lorem ipsum</p>
<p class="paragraph-4">Lorem ipsum</p>

Przed stworzeniem zmiennych musimy jeszcze ustalić ich zakres – czy mają być one globalne (*, body, :root) czy mają mieć ograniczony zasięg (np. header *)

Zmienne globalne CSS (będą one mogły zostać wykorzystane we wszystkich elementach) będą wyglądać w taki sposób:

:root {
  --dark-color: DarkSlateGray;
  --main-color: DarkOrange;
  --main-color-2: DarkViolet;
  --light-color: Gainsboro;
}

Aby przypisać zmienne do danych elementów dodajemy kod CSS:

.paragraph-1{
  color: var(--dark-color);
}
.paragraph-2{
  color: var(--main-color);
}
.paragraph-3{
  color: var(--main-color-2);
}
.paragraph-4{
  color: var(--light-color);
}

W przeglądarce zobaczymy efekt naszej pracy:

Edycja zmiennych CSS w JavaScript

Edycja zmiennych CSS poprzez JavaScript wygląda inaczej niż zmiana standardowych stylów CSS.

Standardowa zmiana stylów CSS wygląda w ten sposób:

const paragraphs = document.querySelectorAll('.paragraph-1');
let i;
for (i = 0; i < paragraphs.length; ++i) {
	paragraphs[i].style.color = "green";
}

Dla przeglądarek wspierających forEach można ten zapis skrócić do:

document.querySelectorAll('.paragraph-1').forEach((paragraph) => {
    paragraph.style.color = "green";
});

W przypadku gdy chcemy zmienić zmienną CSS musimy użyć zapisu w stylu:

document.querySelectorAll('.paragraph-1').forEach((paragraph) => {
	paragraph.style.cssText = "--dark-color: black";
});

W przypadku zmiany globalnych stylów :root korzystamy z wyrażenia:

document.documentElement.style.setProperty('--dark-color', 'black');

Sprawdzanie dostępności w przeglądarce

Starsze przeglądarki nie obsługują zmiennych CSS. Możemy to sprawdzić w CSS korzystając z poniższego kodu:

.paragraph-1 {
    background: red;
}
@supports (--css: variables) {
    .paragraph-1 {
        background: green;
    }
}

Jeśli przeglądarka nie obsługuje zmiennych CSS akapit będzie miał kolor tła czerwony a jeśli obsługuje – zielony.

Podsumowanie

Jak widać, używanie zmiennych w CSS jest naprawdę bardzo proste. Choć nie jest jeszcze bardzo popularne, to na pewno będzie wygodne szczególnie w dużych projektach!