Baza wiedzy Informatyka News

Czym jest SASS?

SASS zrewolucjonizował sposób pisania stylów CSS. Zobacz jakie funkcje oferuje i dlaczego warto stosować go w praktyce.

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!

Czytaj  Amazon – poradnik dla początkujących sprzedawców

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.

Polecane wpisy
Garderoba wysokiej kobiety – co powinno się w niej znaleźć?

Wysoki wzrost to pozytywna cecha wyglądu, która często powoduje jednak problemy z właściwym doborem odzieży. Co powinna zawierać garderoba w Czytaj dalej

TrustRank – o kontrowersyjnym algorytmie Google

W środowisku związanym z SEO często spotykany jest skrót TR (np. “listy TR”), odnoszącym się do TrustRanku strony. Pod pojęciem tym Czytaj dalej

Reklama kontekstowa na blogu – AdSense

Od kilku lat ogromną popularnością w Polsce cieszy się sieć reklamy kontekstowej Google AdSense. Można wręcz powiedzieć, że w kręgu Czytaj dalej

Co jeść przed i po treningu

To co jemy ma duże znaczenie dla naszego zdrowia, a także wpływa na wydolność i siłę podczas treningu. Co więc Czytaj dalej

SEO, pozycjonowanie stron

Co to jest SEO, pozycjonowanie stron? SEO, pozycjonowanie stron czyli Search Engine Optimisation, pozycjonowanie jest to zespół działań, które mają na Czytaj dalej

Udostępnij wpis:

1 KOMENTARZ

Możliwość komentowania została wyłączona.