Zmienne w czystym CSS

CSS3
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.

Spójrzmy najpierw jak wygląda sprawa wsparcia tej właściwości przez przeglądarki:

Zmienne w CSS - kompatybilność

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

Zobaczmy teraz jak możemy tworzyć zmienne.

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) 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:

* {
  --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:

Zmienne w CSS

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