Dlaczego tak bardzo uwielbiam SASS

Kiedy w końcu znalazłam czas, aby dowiedzieć się co to jest ten SASS moje życie się zmieniło ;o)

SASS jest to właściwie rozszerzenie CSS-a. Każdy wie, że czasem pisanie w CSS jest nudne, powtarza się te same reguły, style itd. Dzięki SASSowi można choć trochę zbliżyć się do stwierdzenia ‘programowanie w CSSie’ ;o)

O ile lepiej jest napisać w SASS (i dla mnie czytelniej!):

.content{
    p{
        /* jakieś reguły */
        strong{
            /* jakiś kolor */
        }
    }
 
    a{
        /* jakieś reguły */
    }
    span{
        /* jakiś kolor */
    }
}

Niż przeze mnie już znienawidzone:

.content p{
    /* jakieś reguły */
}
.content p strong{
     /* jakiś kolor */
}
.content a{
    /* jakieś reguły */
}
.content span{
    /* jakiś kolor */
}

Jest czytelniejsze, nie muszę non stop wklejać na początku tego .content, wszystkie zagnieżdżenia tworzone są automatycznie, bo de facto pisząc w SASS (to powyżej) jako efekt końcowy otrzymuję CSS (to poniżej).

Mamy zmienne, mamy mixiny (które można porównać do funkcji – w końcu funkcja służy do ponownego jej wykorzystywania w wielu miejscach), zagnieżdżanie, fory i inne różności. Jak ktoś nie wie jeszcze co to jest to biegiem do dokumentacji.

Do czego zmienne?

Ile razy myślałam sobie o ile prościej byłoby mi zdefiniować sobie na początku jakiś kolor który powtarza się w różnych miejscach, i tylko wklejać nazwę tej zdefiniowanej zmiennej którą łatwiej mi zapamiętać niż cały czas szukać który to był ten niebieski, a który to ten jasno niebieski. W SASS mogę zrobić to tak:

$blue: #0000FF;
$lblue:#A3D1FF;

.content{
    strong{
        color:$blue;
    }
    p{
        color:$lblue;
    }
    h1{
        border-bottom:1px solid $blue;
    }
}

Do czego mixiny?

Do tego do czego wykorzystujemy funkcje w językach programowania. Tylko zawartość tej funkcji bardziej CSS przypomina ;o) Myślę, że najlepszym przykładem wykorzystywania mixinów, jest css framework compass (też ubóstwiam). Pierwszy przykład z brzegu single-box-shadow. Wystarczy, że napiszę single-box-shadow($color, $hoff, $voff, $blur, $spread, $inset) a wszystkie potrzebne prefixy przeglądarek, składnia itp ustawią sie automatycznie po skompilowaniu pliku.

Dlaczego Compass?

Trochę tak przeskakując, ale skoro już wspomniałam o nim należy się pare słów wyjaśnienia. Compass to zbiór mixinów. Jeśli ktoś zainteresuje się SASSem i zacznie z niego aktywnie korzystać, prędzej czy później stworzy własne mixiny które będzie wykorzystywał pomiędzy projektami. Jednak nie wynajdujmy koła na nowo. Compass posiada mnóstwo wbudowanych funkcji, które naprawdę ułatwiają życie web developerom. W szczególności przydatne jeśli chcemy skorzystać z reguł CSS3, compass doda za nas te cholerne prefixy -webkit-,-moz- itd. Oczywiście nie jest to wszystko co potrafi. Wszystko opisane w dokumentacji.

Co więcej?

Uwielbiam SASS i compass. Dla wielu osób poznanie ich może wydać się stratą czasu. Dla mnie jak już go poznałam potrzebuje mniej czasu na przygotowywanie arkuszy stylów dla nowego projektu. Większość stron ma wspólne elementy. Zawsze definiujemy jakiś kontener/wrapper, zawsze jest ten header, footer, jakieś reguły dla akapitów, linków, menu. Jest sporo elementów wspólnych pomiędzy projektami. Wystarczy przygotować sobie prototypy, zbiory własnych mixinowów, zmienne i po prostu dostosowywać te zbiory do projektu. Najlepiej wykorzystać do tego plik _base.scss. Opisane jest to dokładnie w najlepszych praktykach na stronie compassa.

Zmieniam wiarę na SASS.

Do prawidłowego działania SASS potrzebuje zainstalowanego Ruby, a skonfigurowanie compassa jest tak proste jak formularz na stronie instalacyjnej compassa.

Ponieważ struktura moich katalogów wygląda w projektach tak samo, mam przygotowany wzór pliku config.rb i podmieniam w nim tylko nazwę katalogu głównego.

Pracuję na plikach scss. W celu uzyskania pliku w składni CSSowej wystarczy w linii komend wpisać compass compile [sciezka/do/projektu] – dla mnie compass i sass to nierozłączna para. Natomiast jeśli w tle otworzę sobie linię komend i wpiszę compass watch [sciezka/do/projektu] to wszelkie zmiany w pliku scss od razu są kompilowane – to okno musi być cały czas otwarte. Swoją drogą mam do tego plik .bat w którym umieszczona jest ta jedna linijka, więc jak zaczynam pracę wystarczy, że go wyklikam ;o)

Myślę, że każdy kto ceni sobie czas, większą elastyczność i zasadę DRY (Don’t repeat yourself) zakocha się w SASSie i Compassie ;o)