Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.
W poprzednim wpisie przygotowaliśmy wstępnie środowisko pracy oraz stworzyliśmy pierwszy projekt. Teraz wypadałoby iść za ciosem i wykorzystać ten projekt w praktyce. W pierwszej kolejności włącz konsole i przejdź do głównego katalogu ze swoim projektem (katalog zawierający plik config.rb). Aby uruchomić kompilacje.
Polecenie compass watch będzie „wypatrywać” zmian we wszystkich pikach SCSS i na bieżąco je kompilować do CSS, jest to znacznie wygodniejsza metoda niż kompilacja każdego pliku z osobna.
Za pomocą opcji –output-style możemy zmienić domyślny styl do jakiego pliki są kompilowane. Poza wyglądem style różnią się też wielkościami plików.
Styl NESTED
Styl zagnieżdżony. Testowy plik został skompilowany do pliku o rozmiarze 86KB.
Styl EXPANDED
Styl rozszerzony. Testowy plik został skompilowany do pliku o rozmiarze 86KB.
Styl COMPACT
Styl kompaktowy. Testowy plik został skompilowany do pliku o rozmiarze 78KB.
Styl COMPRESSED
Styl skompresowany, jednolinijkowy. Testowy plik został skompilowany do pliku o rozmiarze 36KB.
Zmienne
Często zdarza się, że pracując z CSS powtarzamy w kilku miejscach ten sam kolor czy rozmiar jakiegoś elementu. Korzystając ze zmiennych łatwiej pisać kod zgodny z DRY, którym łatwiej się zarządza i jest po prostu łatwiejszy.
Zmienne deklarujemy rozpoczynając znakiem $ i przypisujemy wartość za pomocą dwukropka.
Wynikiem powyższego kodu po kompilacji będzie:
Pewnie zauważyliście, że na zmiennych na których możliwe jest wykonywanie działać możemy używać podstawowych operatorów matematycznych.
Zagnieżdżanie
Zagnieżdżanie sprawia, że nasz kod jest jeszcze bardziej przejrzysty, czytelny i łatwiejszy w pisaniu. Najłatwiej dziedziczenie zrozumieć na przykładzie.
Wynikiem powyższego kodu po kompilacji będzie:
Sami musicie przyznać, że jest to dużo wygodniejsze niż kopiowanie za każdym razem tego samego początku selektora. Aby odwołać się do selektora rodzica należy użyć znaku &.
Podsumowanie
W kolejnym wpisie przeczytacie o wstawkach, funkcjach oraz dziedziczeniu selektorów, a tymczasem zachęcam do eksperymentowania.
Krystian, jeden z naszych czytelników, w poprzednim wpisie podał link do Prepros. Gdy po raz pierwszy się z nim zetknąłem (1.x) miał trochę problemów z SASS, ale na pierwszy rzut oka nie zauważam tych problemów drugiej wersji tego programu. Jest na pewno warty uwagi lecz na potrzeby SASS jednak osobiście zostanę przy konsoli i Ruby. A jakie jest wasze zdanie? Bardziej przemawiają do was programy z GUI czy nie ma to jak konsola?
Zależy czy GUI jest dobre czy nie ;)
Jest mniej opcji. Niby można to nadrobić z poziomu plików konfiguracyjnego projektu ale już elastyczność takiego rozwiązania jest mniejsza, lecz nie na tyle by stanowić jakąś barierę.
W takim razie nie warto… Chyba że jest jakieś inne GUI. Ja do git’a używam GUI bo jest wygodniejsze niż konsola i ma parę przydatnych funkcji, ale to już zależy od GUI :)
Co do gita to GUI też ograniczone. Jeżeli dobrze pamiętam to nie można z jego poziomu klonować nie swoich repo. Zaletą tego rozwiązania jest jednak to, że dostarcza się z nim Git Shell więc nie ma problemu :)
Mówisz o tym domyślnym GUI? Ja akurat tego nie stosuje, a to którego używam jest moim zdaniem dużo wygodniejsze i bardziej efektywne niż konsola.
To czego używasz? Ja oficjalnego GitHub for Windows i nie ma połowy funkcjonalności GitHub Shell.
Cola Git GUI
Tylko po co w sass klamry ?
Nie ma klamer w .sass, ale są w .scss. Podobnie jest ze średnikami. SCSS jest o tyle wygodny, że nie odzwyczaja nas od pisania zwykłego kodu CSS. Poświęciłem temu chwile w poprzednim wpisie:
https://webroad.pl/html5-css3/657-1-sass-compass-instalacja-i-podstawowe-komendy
Pozdrawiam