07 maja 2017

Sass to supermoce dla stylów CSS

Autor: Paweł Szroeder

Jeśli projektujesz i wdrażasz strony internetowe to CSS powinieneś znać od podszewki. Zapewne słyszałeś także nie raz o Sass, ale możliwe, że ze względu na brak czasu po prostu nie miałeś czasu się w niego wdrożyć. Tak było w moim przypadku. Do czasu.

 

Sass to supermoce dla CSS

 

Czym jest Sass

Sass to nic innego jak pewnego rodzaju rozszerzenie CSS, dzięki któremu pisanie stylów jest jeszcze bardziej wydajne i szybsze. To CSS z supermocami. Istnieje jeszcze inny bardzo znany preprocesor CSS, jakim jest Less. Różnice są niewielkie i wystarczy nauka tylko jednego z nich. Wydaje mi się, że lepiej postawić na Sass, a głównym argumentem może być fakt, że po prostu korzysta z niego więcej osób w branży.

Kod pisany w Sass docelowo jest kompilowany do standardowego pliku CSS. W zasadzie tylko piszemy w Sass, ponieważ plik wynikowy to typowy arkusz stylów CSS i to właśnie ten plik podłączamy pod naszą stronę internetową. Może on od razu zostać zminifikowany, dzięki czemu jego waga jest mniejsza co znacząco wpływa na czas ładowania strony. Nie musimy także podłączać kilku plików CSS jeśli nasz projekt jest bardziej rozbudowany, ale o tym później przy punkcie dotyczącym organizacji pracy.

Kompilację plików najlepiej wykonać przez wiersz poleceń, o czym wspominałem już w tym artykule jakiś czas temu.

Nie będę ukrywał – ze względu na ciągłe projekty i nadmiar pracy minęło sporo czasu zanim zacząłem korzystać z Sass. Dziś mogę powiedzieć Ci jedno – im szybciej się wdrożysz tym lepiej dla Ciebie. Dlaczego? Chociażby z trzeb powodów.

 

Szybsze pisanie CSS

Dzięki Sass zaczniesz jeszcze szybciej pisać swój kod CSS. Ten preprocesor umożliwia wykorzystanie zagnieżdżeń, zmiennych, funkcji, mixin, czy też rozszerzeń, dzięki czemu masz możliwość podstawowego programowania w kodzie CSS. Zapewne wymienione możliwości jeszcze nic Ci nie mówią, ale to właśnie one ułatwiają pracę i są kluczowe.

W Sass wartość koloru możesz podać tylko raz przypisując go do zmiennej, a gdy chcesz go zmienić w różnych klasach wystarczy, że zmienisz go tylko w jednym miejscu. Jeśli dana klasa ma posiadać część stylów innej klasy, wystarczy że ją tylko rozszerzysz dwoma słowami zamiast powtarzać kilkanaście linijek kodu. Jeśli natomiast chcesz wykorzystać styl z różnymi prefiksami dla przeglądarek, wystarczy że użyjesz jednej mixiny – własnej lub gotowej.

Plusy można wymieniać naprawdę w nieskończoność. Sass to po prostu Twoja realna i większa wydajność podczas pisania kodu.

 

Gotowe rozwiązania

W Sass możesz tworzyć swoje własne funkcje i mixiny. Mogą one generować określone gradienty, ikony lub tła. Możesz także korzystać z gotowych rozwiązań. Jednym z nich jest darmowy framework Compass. Dzięki niemu możesz używać setki gotowych mixin z zakresu m. in. CSS3 (np. animacje, cienie, zaokrąglenia), czy też  zaimportować reset CSS za pomocą jednej linijki kodu. Compass to rozszerzenie, z którego warto korzystać.

 

Lepsza organizacja pracy

Gdy pracujesz nad rozbudowanym projektem warto rozdzielić część stylów na osobne arkusze, aby łatwiej i sprawniej dokonywać ewentualnych modyfikacji.

W Sass importujemy wszystkie pliki do jednego wynikowego arkusza stylów, dzięki czemu style dla przeglądarki zawsze pozostają w jednym pliku. Ty jako projektant widzisz natomiast osobne arkusze, w których możesz umieszczać funkcje, mixiny lub po prostu określone elementy składowe projektu.

Kod pisany w ten sposób zapewnia przejrzystość, jest uporządkowany i ułatwia wprowadzanie zmian.

 

Czas na Sass

Sass to pewnego rodzaju przełom w pisaniu CSS, rewolucja dzięki której nasz kod powstaje jeszcze szybciej.

Jeśli jesteś osobą biegłą w CSS i jeszcze z niego nie korzystasz czas to zmienić. Już teraz poświęć kilka godzin na przyswojenie podstaw tego preprocesora. Czas zainwestowany w naukę bardzo szybko się zwróci, tym bardziej że umiejętność jego wykorzystania to dziś standard, z którego korzysta się w większości firm związanych z projektowaniem stron internetowych.