Kaskadowe arkusze stylów (ang. CSS) są dobrze znane każdemu twórcy stron. Stworzenie arkusza stylów bywa czasochłonne i pracochłonne, co w dużej mierze wynika ze specyfiki tej technologii. Jak można więc ułatwić sobie pracę przy opisywaniu formy prezentacji witryny internetowej? Jedną z dróg jest udoskonalenie CSS poprzez rozszerzenie tkwiących w nich możliwości. Jest to kierunek na uczynienie z tego rozwiązania czegoś na kształt quasi języka programowania, przeznaczonego do opisu wizualnego aspektu stron WWW.

Czymś takim są preprocesory CSS takie, jak LESS (http://lesscss.org/, Alexis Sellier) i SASS (http://sass-lang.com/, "Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, and numerous contributors."). Stosując preprocesor CSS zyskujemy dostęp do wielu interesujących elementów częściowo znanych z języków programowania takich, jak: zmienne, tzw. domieszki (ang. mixins), funkcje, instrukcje warunkowe, zagnieżdżone reguły sprawiające, że samym sformatowaniem kodu możemy uzyskać efekt dziedziczenia, operatory matematyczne czy rozszerzenia klas poprzez dziedziczenie reguł z innych klas. Tymi nowymi elementami nie posługujemy się bezpośrednio w CSS, ponieważ nie zostaną one w ogóle zinterpretowane. Definiujemy je w specjalnych plikach właściwych dla danego preprocesora, w przypadku LESS będą to pliku o rozszerzeniu .less, a w przypadku SASS pliki .scss. W plikach tych możemy zawrzeć zarówno kod CSS jak i kod właściwy dla danego preprocesora. Taki plik następnie musi zostać przetworzony do normalnego pliku CCS. Oznacza to przetłumaczenie kodu, które tożsame jest z kompilacją. Aby móc je przeprowadzić potrzebny jest właściwy kompilator.

Najprostszym rozwiązaniem wydaje się zastosowanie programu Koala (http://koala-app.com/) (autor Ethan Lai), który jest o tyle użyteczny, że posiada interfejs graficzny i potrafi przeprowadzić automatyczną kompilację w momencie zapisywania pliku o rozszerzeniu .less i .scss. Program jest bezpłatny, udostępniany na licencji: Apache License, Version 2.0 i jego możliwości są szersze niż kompilacja wskazanych rodzajów plików.

Załóżmy, że napisaliśmy krótki kod SASS w następującej postaci:


Kod SASS

@charset "utf-8"; /*Powyżej:Ustawienie kodowania znaków*/

/*Definicja zmiennej przechowującej informacje o kolorze*/

$kolor_glowny: #bc1c17;

/*Przypisanie zmiennej $odsylacz_nr_1 wartości zmiennej $kolor_glowny*/

$odsylacz_nr_1: $kolor_glowny;

/*Przypisanie zmiennej $odsylacz_nr_2 wartości powstałej w wyniku działania funkcji lighten 
na zmiennej $kolor_glowny, która rozjaśnia wartość tej zmiennej o 19%*/

$odsylacz_nr_2: lighten($kolor_glowny, 19%);


div.pierwszy {
background-color: $kolor_glowny; /*Wstawienie zmiennej*/
height: 200px;
}

div.drugi {
@extend div.pierwszy; /*Dziedziczenie cech po div.pierwszy*/
width: 100px;
}

a {
  color: $odsylacz_nr_1; /*Wstawienie zmiennej*/
  &:hover { /*Odwołanie do elementu nadrzędnego */
    color: $odsylacz_nr_2; /*Wstawienie zmiennej*/
	font-variant: small-caps;
  }
}

Następnie w programie Koala należy wskazać folder zawierający plik.scss – opcja dodawania folderu przedstawiona jest za pomocą znaku plusa. Po dodaniu folderu i kliknięciu na plik powinniśmy otrzymać następujący widok:

zrzut koala

(Źrodło: Zrzut z ekranu z programu Koala - Ethan Lai)

Kliknięcie „compile” powoduje przetworzenie treści pliku .scss do pliku .css. Od tego momentu każdorazowe zapisanie pliku .scss uruchomi jego kompilację do .css, o ile zdecydujemy się na opcję „Auto Compile”.

W wyniku kompilacji kodu podanego powyżej powinniśmy otrzymać następujący plik (uprzednio usunąłem z kodu komentarze):


Kod CSS Wynik Kompilacji

@charset "UTF-8";

div.pierwszy, div.drugi {
  background-color: #bc1c17;
  height: 200px; }

div.drugi {
  width: 100px; }

a {
  color: #bc1c17;
  a:hover {
    color: #e9504b;
    font-variant: small-caps; }