#2 SASS + Compass: kompilacja, zmienne i zagnieżdżanie


15 sierpnia 2013 / Michał Załęcki


Dostępne jest aż 6 części kursu SASS + Compass.
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.

SASS i LESS

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?


Tagi:


9 odpowiedzi na “#2 SASS + Compass: kompilacja, zmienne i zagnieżdżanie”

  1. Mr.Mr pisze:

    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ę.

      • Mr.Mr pisze:

        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 :)

      • Mr.Mr pisze:

        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.

      • Mr.Mr pisze:

        Cola Git GUI

  2. Mateusz Bosek pisze:

    Tylko po co w sass klamry ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *