Zmienne w czystym CSS

Logo CSS3

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:

Lorem ipsum różnokolorowe

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!

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close