Kaskadowe arkusze stylów (Cascading Style Sheets), są nieodłącznym elementem HTML (Hypertext Markup Language). Stanowią dla przeglądarki informacje o tym, jak mają wyglądać poszczególne elementy strony www. Definiują jak elementy maja być względem siebie ułożone, czy mają mieć ramkę, kolor tła, czy użyta w nich czcionka ma być pogrubiona lub nie i czy ma mieć, na przykład, rozmiar 24 pikseli. Brzmi prosto, jednak wraz z rozwojem aplikacji internetowych, ekspansji urządzeń mobilnych a z nimi pojawieniem się reguł Responsive Web Design sprawa się nieco skomplikowała. Duże aplikacje potrafią mieć dziś tysiące linii arkuszy stylów, dokładając do tego szeregi wyjątków jak warianty dla różnych typów ekranów czy opcje wyłącznie dla potrzeb wydruku. W efekcie praca z nimi może oznaczać dla web developerów prawdziwy ból głowy.

W odpowiedzi na to powstał preprocesor SASS. Oferuje on nieco odmienny od tradycyjnego CSS, prostszy i bardziej modułowy sposób pisania stylów. Zapisuje on je w plikach o rozszerzeniu .scss, natomiast przeglądarka internetowa do poprawnego wyświetlania stylów na stronie potrzebuje pliki z rozszerzeniem .css. Jak więc uzyskać taki plik? Preprocesor sam się tym zajmie i automatycznie skompiluje pliki .scss, do pełnoprawnego CSS.

Co oferuje nam SASS?

Zmienne

Przede wszystkim możliwość używania zmiennych. Nie każda przeglądarka ma możliwość odczytania zmiennych zapisanych w czystym CSS. Używając preprocesora, możemy do zmiennej przypisać kawałek kodu, który później będziemy mogli wykorzystać w wielu miejscach. Dla przykładu w zmiennej $mainTextColor możemy zapisać kolor #AE637C. Teraz do właściwości CSS możemy użyć tej zmiennej w dowolnym miejscu. Preprocesor, w czasie kompilacji, przypisze jej wartość zapisaną przez nas w zmiennej. Wyobraźcie sobie jakie to jest przydatne: aby zmienić wiodący kolor tekstu w witrynie wystarczy zmienić tę wartość w jednej zmiennej, a nie w każdej właściwości z osobna. Szybkie, proste i czytelne!

Tylko tyle? Oczywiście, że nie. To tylko podstawowe funkcje. Za pomocą preprocesora możemy wykonywać różne obliczenia, zagnieżdżać selektory, tworzyć własne funkcje, pętle a nawet instrukcje warunkowe!

Bloki i selektory

W CSS, każdy element trzeba było stylować osobno, powielając “ścieżkę” selektorów “rodziców” je poprzedzające. Preprocesor SASS znacznie to ułatwia. Tworząc blok głównego selektora “rodzica”, możemy w jego wnętrzu wymienić selektory, które będą zagnieżdżone. Dzięki czemu kod jest krótszy i znacznie bardziej czytelny. Co więcej, podobnie jak w przypadku zmiennych, przydaje się to niezwykle gdy zachodzi potrzeba zmiany w strukturze dokumentu HTML. W dobrze napisanym pliku SASS wystarczy wtedy zmienić nazwę lub hierarchię jednego elementu, zamiast szukać wszystkich jego wystąpień jak w tradycyjnym CSS.

Funkcje

Funkcje w SASS możemy tworzyć i wykorzystywać podobnie jak w języku JavaScript. Przykładem takiej funkcji w CSS jest calc(), służący do obliczania wyjściowej wartości za pomocą reguł matematycznych. W SASS natomiast, możemy sami takie funkcje tworzyć i udoskonalać o nowe funkcjonalności.

Podsumowanie

W dzisiejszych czasach dużą uwagę przywiązuje się do automatyzacji. Dzięki SASS, praca z arkuszami stylów staje się szybsza, bardziej wolna od błędów a sam produkt szybciej trafia do klienta.