Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

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

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:

gem install sass

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

sass plik.scss:plik.css

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:

sass katalog_sass:katalog_css\plik.css

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

sass --watch katalog_sass:katalog_css\plik.css

--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:
sass --watch katalog_sass:katalog_css\plik.css -–style compressed

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. 

Komentarze

0 nowych
kubut   18 #1 21.05.2011 14:14

Zapowiada się interesująco, czekam na kolejne części bo może mi się to przydać :)

Jaahquubel_   13 #2 23.05.2011 14:31

Może bardziej łopatologicznie wyjaśnij po co ta zabawa? I może wrzuć wynik konwersji dla porównania?

A sam pomysł - w porzo.

  #3 24.05.2011 21:32

Popieram Jaahquubel_
Od razu z grubej rury, co?
Ja wiem co mi da SASS, bo swego czasu interesowałem się nim. A inni? Co im da sass. Parę udogodnień? Jakich?
Bo nie wiem jak dla Ciebie, ale dla mnie nie jest ważne to, że moe sobie _ząbkowaniem_ kod pisać. Dla mnie ważny jest czysty, śliczny, rozkoszny kod CSS działający gdzie się tylko da. Ne? Czy się mylę. Ale jak się mylę, to niech mnie pioruny w ilości stu uderzą.

eryk.piast   2 #4 24.05.2011 23:35

Ja również czekam na dalsze wpisy! Technologia wydaje się ciekawa i pewnie w zupełności może zastąpić prymitywne, chociaż i tak lepsze od "ręcznego" bazgrania generowanie kodu przez PHP, które jak na razie wykorzystuję w cięższych przypadkach... Dzięki za zwrócenie uwagi, że taka przydatna rzecz istnieje ;-)

Simek   3 #5 25.05.2011 13:34

Dzięki za komentarze! W skrócie na nie odpowiem: mianowicie, dzięki SASSom ulega znacznemu zmniejszeniu ilość kodu, który trzeba napisać ręcznie, a pisanie CSSów staje się jeszcze bardziej intuicyjne.

Wszystkie zalety i to jak gdzie i po co stosować opiszę w kolejnej części, lecz póki co praca i sesja na uczelni + weekendowe wyjazdy skutecznie mi to uniemożliwiają.

slepcu   7 #6 29.05.2011 09:40

geniusz sass jak i less czy scss polega też na tym że można sobie coś w locie wyliczyć - używać zmiennych i operacji na nich.

polecam też spojrzeć na less - mozna w kodzie html wklepac kody podobny do sass ale 'kompilacja' przeprowadzona bedzie przez javascript w przegladarce.

wszerad   6 #7 09.06.2011 21:02

Bardzo ciekawe, zaraz skombinuje jakiś moduł do node.js...

  #8 12.08.2015 21:38

Wiem, że dość spory odkop i nie wiem czy wtedy też tak było, ale LESS > SASS