SASS – czyli jak uprzyjemnić sobie pracę z CSSami - Część 1: Wprowadzenie
21.05.2011 | aktual.: 22.05.2011 08:47
[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.