SASS – czyli jak uprzyjemnić sobie pracę z CSSami - Część 1: Wprowadzenie

[image=img1] Niniejszym wpisem chciałbym rozpocząć kilkuczęściowy artykuł powiązany z tutorialem, prezentujący praktycznie zastosowanie SASSów w pracy Web Developera / Front End Developera zarówno w projektach małych jak i w projektach zespołowych.

SASS (Syntactical Awesome Stylesheet) jest językiem skryptowym, którego kod przetwarzany jest do plików wynikowych kaskadowych arkuszy stylów - CSS. Wprowadza on całkiem sporą liczbę udogodnień dla programisty począwszy od struktur zagnieżdżonych, poprzez mixiny, zmienne, kończąc na pętlach zarówno warunkowych jak i iteracyjnych.

SASS oferuje nam dwie składnie/konwencje kodowania.

Pierwsza wywodzi się z CSSów i nazywa się Sassy CSS (SCSS), gdzie atrybuty dla konkretnych znaczników grupowane są w klamrach i oddzielane są między sobą średnikami, np.:

Pliki takie opatrujemy końcówką *.scss.

Druga konwencja składni wywodzi się z języka HAML ( jest to język skryptowy dla HTML stworzony przez tych samych autorów co SASS ), w którym pomijane są zarówno klamry jak i znaki oddzielające poszczególne pary atrybutów i wartości. Składa ta nazywana jest „indented” co w wolnym tłumaczeniu można przełożyć jako „ząbkowana składnia”. Przykład:

Plikom kodowanym wg. powyższej konwencji nadajemy końcówkę *.sass.

Koniec części teoretycznej, przejdźmy do praktyki – co i jak trzeba zainstalować, aby skorzystać z SASS.

Niezbędna jest instalacja Ruby’iego (klik ), z którą zapewne poradzicie sobie bez problemowo. Gdy już ten etap jest za nami, czas na instalację SASS, przeprowadzamy ją poprzez wpisanie w linii komend/terminalu:

[code]gem install sass[/code]

Teraz czas na krótkie opisanie komend uruchomieniowych SASS. Najbardziej podstawowa komenda to:

[code]sass plik.scss:plik.css[/code]

gdzie „sass” jest zmienną środowiskową, musimy podać ją zawsze na początku, aby odwołać się do skryptów SASS, następnie „plik.scss:plik.css” gdzie ciąg znaków to ścieżka względna, zależąca od lokalizacji w której uruchomiliśmy skrypt, która prowadzi do pliku źródłowego SASS/SCSS, a drugi ciąg, po dwukropku, to plik wynikowy wraz z lokalizacją.

Powyższą komendę można zarówno wykorzystać do konwersji wielu plików SASSowych do jednego pliku wynikowego:

[code]sass katalog_sass:katalog_css\plik.css[/code]

Teraz czas wspomnieć o kilku dodatkowych parametrach z których naprawdę warto skorzystać:

--watch skrypt konwertujący działa cały czas do momentu jego przerwania przez użytkownika wykrywając i konwertując zmiany „na bieżąco”, bardzo użyteczna funkcja

[code]sass --watch katalog_sass:katalog_css\plik.css[/code]

--style plik wynikowy dodatkowo oddawany jest operacjom stylizacyjnym – do wyboru mamy kilka stylów:

nested – klamry zamykające przenoszone są na koniec linii ostatniej pary atrybut: wartość, a style odnoszące się do wnętrza danego znacznika są układane przez tabulatory w kaskadę

expanded – typowy, najprostszy styl, w którym każdy selektor czy znacznik zaczyna się od nowej linii, a jego atrybuty są wyróżnione jedynie jednym wcięciem

compact – wszystkie pary wartości odnoszących się do danego selektora ułożone są w jednej linii oddzielane są jedynie spacjami, więc każdy selektor wraz z atrybutami znajduje się tylko i wyłącznie w jednej linii

compressed – najbardziej pożądany i chyba najbardziej użyteczny styl formatowania CSS, lecz kompletnie nie przystosowany do pracy człowieka nad nim, cały CSS znajduje się w jednej linii, zbędne spacje jak i inne znaki niedrukowane są usuwane, dzięki czemu następuje znaczna redukcja rozmiaru pliku

Przykład użycia: [code]sass --watch katalog_sass:katalog_css\plik.css -–style compressed[/code]

Tym właśnie wyjaśnieniem postanowiłem zakończyć pierwszą część serii artykułów poświęconych językowi SASS. W kolejnej odsłonie zajmę się już stricte stroną użyteczności i kodowania, więc postaram się przybliżyć wam zagadnienia takie jak mixiny, dzielenie atrybutów, dziedziczenie własności po klasach/mixinach, odwołania do selektora nadrzędnego/rodzica oraz używanie zmiennych.

Wszelkie pytania zadawajcie w komentarzach do tego wpisu, postaram się na nie odpowiadać jak najszybciej, oczywiście w ramach wolnego czasu : )

P.S. Niestety w związku z nie do końca poprawnym działaniem znaczników CODE na blogach nie jest w stanie przedstawić kodu kaskadowo (z wykorzystaniem tabulatorów), więc wrzuciłem kod w postaci grafiki.