Css variables

Przyjrzymy się pokrótce dokumentowi css variables draft. W3C zabiera się za wprowadzenie zmiennych do css. Pozwoli to w łatwy sposób używać powtarzających się właściwości i zmiejszy redundację kodu, co w efekcie da mniejsze pliki css. Zobaczmy jak na dzień dzisiejszy można deklarować zmienne. Zmienne deklarujemy za pomocą prefixu var-, po którym następuje nazwa zmiennej.

:root {
	var-header-color: green;
}

Jeśli chcemy użyć wcześniej zadeklarowanej zmiennej nazwę zmiennej poprzedzamy znakiem dolara, po którym następuje nazwa zmiennej (jak poniżej).

h1 { 
	background-color: $header-color; 
}

Powyższy kod jest tym samym co napisanie background-color: green;. Poniższy przykład pokazuje działanie przy wielokrotnej deklaracji zmiennej (w tym przypadku color). Wszelkie "sprawy" rozwiązuje tu dziedziczenie.

:root { var-color: blue; }
div { var-color: green; }
#alert { var-color: red; }
* { color: $color; }

<p>Dziedziczenie z root</p>
<div>Zielony przypisany do mnie</div>
<div id='alert'>
  Czerwony
  <p>też czerwony, bo dziedziczę.</p>
</div>

Co jeśli zadeklarujemy nieprawidłową zmienną? np.

:root { var-not-a-color: 20px; }
p { background-color: red; }
p { background-color: $not-a-color; }

Kolor elementu będzie w tym przypadku ustawiony na transparent. Działa to inaczej niż jeślibyśmy w arkuszu stylów napisali background-color: 20px;, co spowoduje błąd składni i ta reguła nie będzie brana pod uwagę, więc zostanie zastosowany czerwony kolor tła.
Przydatne jest określanie wartości domyślnej dla zmiennej w przypadku gdy jest niezdefiniowana lub nieprawidłowa. Pozwala na to notacja var() przy odwoływaniu się do zmiennej.

:root { var-not-a-color: 20px; }
p { background-color: var($not-a-color,'blue'); }