Użycie zmiennych CSS

Zmienne CSS to zdefiniowane jednostki zawierające specyficzne wartości, reużywalne w całym dokumencie. Zmienne są ustawiane przy użyciu notacji właściwości niestandardowych (np. --kolor-glowny: black;) i mają dostęp do funkcji var() (np. kolor: var(--kolor-glowny);) .

Skomplikowane strony internetowe mają bardzo dużo powtarzającego się kodu CSS. Dla przykładu, taki sam kolor może być użyty setki razy w różnych miejscach, co w przypadku zmiany wymana globalnego wyszukiwania i zmian w wielu miejsach. Zmienne CSS pozwalają na przechowywanie wartości w jednym miejscu, zmiast wielu. Używają one również semantycznych identyfikatorów. Na przykład --glowny-kolor-tekstu jest łatwiejszy do zrozumienia niż #00ff00 szczególnie gdy taki sam kolor jest użyty w różnych kontekstach.

Zmienne CSS podlegają kaskadowości i dziedziczą wartości po rodzicach.

Podstawowe użycie

Deklarowanie zmiennych:

element {
  --glowny-kolor-tla: brown;
}

Użycie zmiennych:

element {
  background-color: var(--glowny-kolor-tla);
}

Zmienne CSS - pierwsze kroki

Zacznijmy od prostego kodu CSS z różnymi klasami, których elementy posiadają różne kolory:

.jeden {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.dwa {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.trzy {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.cztery {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.piec {
  background-color: brown;
}

<div>
    <div class="jeden"></div>
    <div class="dwa">Tekst <span class="cztery">- wiecej tekstu</span></div>
    <input class="trzy">
    <textarea class="piec">Lorem Ipsum</textarea>
</div>

:root {
  --glowny-kolor-tla: brown;
}

.jeden {
  color: white;
  background-color: var(--glowny-kolor-tla);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.dwa {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.trzy {
  color: white;
  background-color: var(--glowny-kolor-tla);
  margin: 10px;
  width: 75px;
}
.cztery {
  color: white;
  background-color: var(--glowny-kolor-tla);
  margin: 10px;
  width: 100px;
}

.piec {
  background-color: var(--glowny-kolor-tla);
}

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

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

z następującym kodem CSS:

.dwa {
  --test: 10px;
}

.trzy {
  --test: 2em;
}

W tym przykładzie wynikiem dla var(--test) jest:

• class="two" element: 10px
• class="three" element: 2em
• class="four" element: 10px (odziedziczone od rodzica)
• class="one" element: nieprawidłowa wartość, która jest wartością domyślą każdej właściwości.

Zgodność z przeglądarkami

[1] Przeglądarka Chrome początkowo zaimplementowała zmienne CSS ze zmienioną składną, która wymagała niestandardowego prefixu przed nazwą zmiennej -webkit-var-. Można jej było następnie użyć przy pomocy funkcji -webkit-var(). Dodatkowo implementacja została ukryta pod flagą Eksperymentalne funkcje platformy internetowej  pod chrome://flags.

[2] Chrome 34.0 usunął zmienne CSS ze względu na problemy z wydajnością.

[3] Zmienne CSS są zaimplementowane w preferencjach layout.css.variables.enabled, standardowo ustawione na false i używające stare składnia var-variablename w Gecko 29. Rozpoczynając od Gecko 31 implementacja jest włączona i używa nowej składni --variablename.