«

Lut 14 2015

Łatwa praca z SCSS

Wstęp

Kaskadowe arkusze stylów, zwane popularnie CSS z pewnością zmieniły oblicze dzisiejszych nowoczesnych stron internetowych. Dawne metody na uatrakcyjnienie wirtualnych witryn za pomocą HTML’a (<basefont>, <big>, <center>, <font>, <tt>) i JavaScript’u (animacje, triggery) odchodzą w zapomnienie, ponieważ większość z tych rozwiązań została zastąpiona przez przyjemne w tworzeniu „Cascading Style Sheets”. Niewątpliwie największą zaletą CSS jest brak wymogu umiejętności programowania, przez co nawet laik może zrozumień i nauczyć się kilku podstawowych tagów, żeby użyć ich zgodnie ze swoją intencją. Co jednak z całą resztą osób, dla których podłączenie bazy danych do strony w PHP nie jest problemem? I dla nich coś się znajdzie.

Rozwiązanie problemu

SCSS jest prekompilatorem skryptów napisanych w specyficznym języku… programowania. Właśnie i tutaj co bardziej ogarnięci z was mogą mieć zastrzeżenia, ponieważ SCSS nie jest do końca językiem programowania. Umożliwia on jednak wykorzystanie składni i elementów podobnych do chociażby języka PHP. SCSS wnosi zmienne, mixins (coś w rodzaju procedur pozwalających nie powtarzać kodu), zagnieżdżanie elementów DOM tworząc pewną hierarchię, używanie bibliotek, tworzenie funkcji i wiele więcej. Najlepsze jest to, że cokolwiek napiszemy zgodnie ze składnią SCSS lub czystego CSS skompiluje się i tak do CSS. Przykładowo kod napisany w SCSS:

skompiluje się do:

Ciężko wymienić jest wszystkie możliwości takiego rozwiązania, dlatego polecam zapoznać się osobiście ze składnią… no właśnie, czego konkretnie?

Sass czy LESS

less-vs-sass-1-638Pominę odwieczną dyskusję na temat tego, który prekompilator jest lepszy. Jeśli zaczynasz przygodę z SCSS, to osobiście polecam Sass, ponieważ ma bardziej logiczną i spójną składnię (przynajmniej według mnie) np. oznaczanie zmiennych przy użyciu znaku $ (Sass) podobnie jak w PHP, zamiast @ (LESS). Sass umożliwia także użycie biblioteki Compass, która nie ma swojego porównywalnego odpowiednika w LESS. Jedyną funkcją, która wydaje mi się działać na korzyść LESS jest możliwość prekompilacji kodu po stronie przeglądarki (użytkownika) dzięki temu, że kod prekompilatora został przepisany na język JavaScript.

Oficjalne dokumentacje obu języków znajdują się na stronach Sass i LESS.

Jak używać?

Pomijając naukę języka najważniejszą kwestią związaną z użytkowaniem jest sam proces prekompilacji kodu, który siłą rzeczy musi ostatecznie trafić do użytkownika końcowego w formie kodu CSS. Jednym ze sposobów jest użycie wiersza poleceń i instalacja języka Ruby, a następnie kompilatora Sass, jednak jako codzienny użytkownik Windows’a jestem przyzwyczajony do okienkowej obsługi nowo zainstalowanego programu z praktycznym GUI.

Z kilku aplikacji, które możemy użyć w ten sposób (zarówno płatnych, jak i darmowych) moim wyborem jest Koala. Dostępny jest do pobrania za darmo z jego oficjalnej strony na Windows’a, Mac’a i Linux’a.

Interfejs Koala

Interfejs Koala

Interfejs programu jest banalnie prosty w obsłudze i ogranicza się do kilku kroków:

  1. Wybranie katalogu projektu. 
  2. (opcjonalnie) Wybór ścieżki do zapisania skompilowanego pliku CSS/JS. Jeśli nie wykonamy tego kroku, plik zapisze się w katalogu źródłowym, co w większości sytuacji jest działaniem porządanym.
  3. Auto-kompilacja – jeśli chcesz, aby program sam skanował plik w poszukiwaniu zmian i kompilował go w locie. Bardzo wygodna opcja, ponieważ wystarczy zapisać plik w dowolnym edytorze, a kompilacja przebiegnie automatycznie bez potrzeby każdorazowego klikania w przycisk „Compile”.
  4. Dołączenie biblioteki Compass. Więcej informacji na oficjalnej stronie.
  5. Automatyczne dołączanie prefiksów przeglądarek np. -webkit-, -moz-, -ms-, -o-. Zwalnia z dodatkowych CTRL+C, CTRL+V.
  6. Koala umożliwia także kompresję pliku po kompilacji, aby zajmował mniej miejsca i szybciej się ładował/wykonywał w przeglądarce. Pliku skompilowanego raczej nie będziemy edytować, więc wartko skorzystać z tej funkcji.

Zakończenie

Mam nadzieję, że zachęciłem i wytłumaczyłem jak łatwo, szybko i przyjemnie można zacząć korzystać z SCSS i jak można zorganizować pracę z prekompilatorem. Gdy raz zaczniesz korzystać z SCSS, nie będziesz mógł wrócić do zwykłego CSS. A najlepsze w tym jest to, że wcale nie musisz. 😉

Top