Wstęp

Witaj w lekcji o preprocesorze styli CSS zwanymSASS. Na wstępie musisz wiedzieć, że kurs przeznaczony jest dla osób, które bez większych problemów radzą sobie z HTMLem oraz CSSem w wersji trzeciej. Są to podstawowe umiejętności które powinien znać każdy, kto chce zapoznać się z SASSem. Jeśli jeszcze nie poznałeś HTML zapraszam Cię donaszego kursu, a jeśli nie czujesz się pewnie w CSS, zapraszam Ciętutaj.

Jeśli nadal tu jesteś, to oznacza, że poznałeś już podstawowe zagadnienia i chcesz poszerzać swoją wiedzę, aby ułatwić sobie zadanie jakim jest pisanie styli. W tym kursie dowiesz się co to jest preprocesor, czym różni się SASS od SCSSa, a także poznasz praktyczne przykłady wykorzystania SASS w komercyjnych projektach.

Zaczynajmy!

Czym jest preprocesor?

Pewnie spotkałeś się już z pojęciem preprocesor CSS. Czym więc jest preprocesor CSS? W ogromnym skrócie jest to narzędzie, które ułatwia pisanie styli CSS. Cały proces jest podobny do kompilacji programów pisanych np. w C++. W tym języku programista pisze kod zrozumiały dla człowieka i kompiluje go do kodu maszynowego, który zaś jest zrozumiały dla komputera. W stylach jest podobnie. “Kompilujemy” SASS zrozumiały i łatwy dla człowieka do CSS, który jest zrozumiały dla przeglądarki. Oczywiście tutaj sprawa wygląda inaczej, bo CSS także jest zrozumiały dla człowieka, jednak SASS jest taką otoczką, która pomaga nam stworzyć bardziej zarządzalny i tańszy w obsłudze kod.

Początkowo “kompilacja” odbywała się w przeglądarce przy pomocy skryptów napisanych w języku JavaScipt, dlatego też, możesz znaleźć w internecie biblioteki takie jak sass.js. Dzięki tej bibliotece pliki pisane w SASS były przerabiane do CSS w samej przeglądarce i nie potrzebna była ich kompilacja na komputerze programisty. Był to proces znacznie obciążający komputer osoby, która odwiedzała stronę. Dzisiaj raczej nie stosuje się już tej praktyki. Aktualnie tłumaczenie kodu SASS odbywa się na komputerze programisty, podczas pisania kodu. Dzięki temu komputery każdego z użytkowników nie są obciążane kompilacją SASSa i na serwerze udostępniasz już tylko gotowy i zazwyczaj skompresowany plik CSS, dzięki czemu strona ładuje się pod tym względem najszybciej jak to możliwe.

Przegląd preprocesorów CSS dostępnych na rynku.

Dlaczego warto wybrać SASS?

SASS nie jest oczywiście jedynym preprocesorem CSS dostępnym na rynku. Jest on jednym z najszybszych i najpopularniejszych sposobów pisania styli, ale istnieją inne z którymi możesz się spotkać. Za SASSem najbardziej przemawia ogromne wsparcie społeczności programistów. Zapewniam, że nie będziesz miał większego problemu w znalezieniu odpowiedzi na jakikolwiek temat dotyczący SASSa.

Drugim najpopularniejszym preprocesorem jest oczywiście LESS. Różnic między oboma sposobami zapisu jest stosunkowo niewiele. Sprowadzają się przede wszystkim do innych symboli używanych do deklarowania zmiennych, czy funkcji (mixinów).

Zatem dlaczego bardziej polecam SASSa od LESSa? Są dwa podstawowe powody. Pierwszym z nich jest nieco nieczytelny zapis pętli w LESS. Nie używa się ich zbyt często, lecz gdy już zajdzie taka potrzeba, zapis algorytmu jest niestandardowy.

Drugim powodem jest jakość generowanego kodu CSS i czas w jakim jest to wykonywane. W statystykach i opisach, które możesz znaleźć w sieci, nie są to kolosalne różnice. Wydaje mi się, że na popularność SASSa w dużej mierze wpłynęła informacja, że najpopularniejszy framework CSS - Bootstrap - zmienia sposób zapisu z LESS na SASS właśnie z powodu prędkości. Uwierzcie mi, że ma to duże znaczenie gdyż w praktyce kompilacje SASS do CSS wykonuje się przy każdym zapisie pliku, czyli co najmniej kilka razy w ciągu minuty.

Poniżej lista pozostałych preprocesorów z którymi możesz się spotkać, choć nie mają takiej popularności jak SASS czy LESS:

• Stylus,
• CSS Crush,
• Myth,
• Rework,
• Clay,
• DtCSS,
• CSS Preprocessor,
• Switch CSS.

Część z nich jest uzależniona od języka używanego na backendzie aplikacji np. od PHP5, dlatego nie zyskały one większej popularności. SASS jest generowany na komputerze programisty, dlatego nie ma znaczenia w jakim środowisku jest używany. Wystarczy, aby dane środowisko (przeglądarka) akceptowało standardowe style CSS, bo przecież takie otrzymamy po kompilacji SASSa.

SASS czy SCSS?

Przed przejściem do sedna całego kursu, chciałbym wyjaśnić Ci jeszcze jedną rzecz. W całym kursie używam sformułowania SASS. Jest ono poprawne i powszechnie używane w całym środowisku programistów. Jednak jak za niedługo zauważysz pliki mają rozszerzenie.scss. Jeśli dobrze poszukasz w otchłaniach internetu znajdziesz również pliki z rozszerzeniem.sass. Który zapis jest poprawny i dlaczego istnieją dwa różne rozszerzenia plików?

Otóż SASS posiadała w swej historii dwie wersje zapisu. Pierwsza z nich to pliki z rozszerzeniem.sass, druga zaś to pliki z rozszerzeniem.scss. Stało się tak, ponieważ SASS na początku był mocno powiązany z silnikiem templatek HAML używanym w Ruby. Używał zatem podobnej składni do tej, która była znana już wcześniej programistom Ruby. Przyjęło się jednak, że stara wersja jest uważana za rzadziej używaną (nie przestarzałą -http://thesassway.com/news/sass-is-here-to-stay), dlatego używa się nazwy SASS, ale plików z rozszerzeniem.scss.

Czym różnią się oba zapisy? Różnice są znikome, co możecie zobaczyć poniżej:

SCSS:

SASS:

Podstawową różnicą jest brak klamer oznaczających początek i koniec bloku, co jest właśnie typowe dla silnika templatek HAML. Pamiętajcie jednak, że w tym kursie nauczycie się korzystać z bardziej popularnej wersji SASSa, czyli plików z rozszerzeniem.scss.

Dużą zaletą plików.scssw porównaniu do.sassjest to, że jest z nimi zgodny standardowy kod CSS. Czyli do plików.scssmożna wstawić skopiowany z innego źródła kod CSS i wszystko będzie działać poprawnie.

Podsumowanie

W tej lekcji poznałeś podstawowe informacje na temat preprocesorów, samego SASSa czy jego konkurentów. Zapraszam Cię do kolejnej lekcji, w której zaczniemy rozbierać SASSa na części pierwsze.