Preprocesory CSS - po co mi to? Wstęp do Sass

Sass (SCSS) nie istniałby bez CSS-a. CSS jest jednym z ważniejszych języków dla front-end web developera. Kaskadowe arkusze stylów (Cascading Style Sheets) są informacją dla przeglądarki, jak powinna wyglądać strona. Względem dawno już zdeprecjonowanego stylowania strony poprzez elementy i atrybuty HTML, CSS wydaje się być prawdziwą rewolucją. Czy może istnieć coś jeszcze lepszego?

I tak, i nie. Przeglądarki oczekują informacji o wyglądzie strony zapisanej w CSS-ie. Nie jest jednak powiedziane, że musimy pisać w tym właśnie języku. Możemy skorzystać z preprocesorów CSS, które ułatwiają pisanie kodu, a po błyskawicznej kompilacji otrzymamy pełnoprawne pliki CSS.

Do najpopularniejszych preprocesorów CSS należą Sass oraz Less. My zajmiemy się Sassem, ponieważ jego znajomość bardziej się przyda przy używaniu popularnego Bootstrapa lub Materialize CSS.

W ramach Sass dostępne są dwie składnie: SCSS i Sass. Składnia SCSS jest tak naprawdę rozszerzoną składnią CSS. Oznacza to, że każdy kod CSS będzie poprawnym kodem SCSS. Ze względu na tę właściwość SCSS polecam bardziej tę składnię początkującym - warto jednak pamiętać, że to tylko inny zapis w ramach tego samego języka!

Jakie korzyści daje Sass (SCSS)?

Dawniej pierwszą odpowiedzią byłyby zapewne zmienne. Dziś powoli zmienne stają się standardem również w samym CSS-ie, jednak wiele wody w Wiśle upłynie, zanim będziemy mieć pewność, że każdy użytkownik ma przeglądarkę wspierającą zmienne CSS.

Tabela przedstawiająca wsparcie dla zmiennych CSScaniuse.com - na czerwono zaznaczone przeglądarki bez wsparcia dla zmiennych CSS.

Zmienne znacząco poprawiają czytelność kodu i ułatwiają jego edycję. Wystarczy w jednym miejscu zadeklarować np. kolor pierwszoplanowy strony, a później tylko do tej zmiennej się odwoływać. Sass kompiluje zmienne do zwykłych wartości tak, że wynikowy plik CSS nie wykorzystuje de facto zmiennych. Korzystamy więc z dobrodziejstwa, jakim są zmienne, bez martwienia się o zgodność z przeglądarką.

Sass pozwala też na zagnieżdżanie selektorów, tworzenie własnych funkcji, pętli, instrukcji warunkowych i wiele innych. Część z tych możliwości opiszę szczegółowo poniżej.

Komu przyda się Sass (SCSS)?

Wszystkim. Do każdego projektu. Sass nie ma praktycznie żadnych minusów - instalacja i konfiguracja są banalnie proste, licencja - darmowa (MIT), a pełna zgodność CSS z SCSS powoduje, że w najgorszym razie będziemy pisali tylko w CSS-ie i nie wykorzystamy możliwości Sassa, ale nie będziemy mieli w związku z tym żadnych dodatkowych utrudnień.

Często pojawiającym się argumentem przeciwko preprocesorom jest brak możliwości podglądu źródła w przeglądarce - będziemy tam bowiem widzieli skompilowany plik CSS, a nie SCSS. Obecnie nie jest to jednak żaden problem, ponieważ mamy możliwość wygenerowania tzw. sourcemaps. Jeśli będziesz tworzyć większy projekt, to z pewnością zainteresujesz się tą kwestią, przy mniejszych nie jest ona zbyt istotna.

Więc instalujemy!

Na oficjalnej stronie Sassa podanych jest wiele sposobów, jak zacząć korzystać z niego. Możesz wybrać dowolny spośród tam podanych lub skorzystać z moim zdaniem najwygodniejszego - opisanego poniżej ;)

  1. Jeśli jeszcze nie masz Visual Studio Code (VS Code), zainstaluj go.
  2. Uruchom VS Code i przejdź do Rozszerzeń (Extensions)
  3. Wpisz w polu wyszukiwania Easy Sass.
  4. Odnajdź na liście Easy Sass i kliknij Install.
  5. Wyłącz i włącz VS Code (możesz kliknąć Reload).

Instrukcja instalacji Easy Sass dla Visual Studio Code - strony internetowe Kłodzko

Już! Prawda, że easy?

Pierwsze kroki!

Zacznijmy od stworzenia pliku HTML (File->New File) - możesz wykorzystać ten kod:

<!doctype html>
<html lang="pl">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/main.css">
    <title>Hello, Sass!</title>
    </head>
    <body>
    <h1>Hello, Sass!</h1>
    <main>
        <p class="warning">Sass example</p>
        <p>Sass example 2</p>
    </main>
    <p> Sass example 3</p>
    </body>
</html>

Jak pewnie zauważyłeś, ładujemy do niego plik CSS (main.css), ponieważ przeglądarka nie zrozumie plików .scss. Stwórzmy teraz w tym samym folderze nowy plik SCSS i zapiszmy jako go jako main.scss. Powinniśmy mieć więc te 2 pliki w folderze:

Pliki SCSS - Agencja Marketingowa Wrocław

Gdzie więc jest plik main.css?! Spokojnie ;) Wejdź do main.scss i wpisz tam jakikolwiek kod CSS, np. ten:

h1 {
    color: red;
}

p {
    color: blue;
}

Zapisz plik. Co się stało? Easy Sass działający w tle wygenerował plik main.css i jego zminifikowaną wersję. Zawartość main.css obecnie nie różni się niczym od main.scss:

Pliki SCSS i CSS - Agencja Interaktywna Wrocław

Przeglądarka zaś poprawnie wyświetla napisany przez nas styl:

Efekt zastosowania kodu SCSS - widok z przeglądarki - strony internetowe Kłodzko

Zmienne i zagnieżdżenia selektorów

W przypadku nawet średniej wielkości projektu kolor pierwszoplanowy jest wartością, która dziesiątki razy będzie się pojawiała w arkuszu stylu. Zdefiniujmy więc raz kolory używane na stronie w jednym miejscu, a zamiast wartości podajmy nazwy zmiennych (nazwy zmiennych w SCSS rozpoczynają się od znaku $):

$primary-color: red;
$secondary-color: blue;

h1 {
    color: $primary-color;
}

p {
    color: $secondary-color;
}

Wynikowy CSS wygląda identycznie, jak poprzednio wygenerowany. Tak samo jak strona w przeglądarce. Jeśli powstanie kolejny element na stronie mający mieć kolor czerwony, użyj zmiennej $primary-color. Gdy zmienisz zdanie i stwierdzisz, że chcesz mieć zieloną stronę, zmień jedynie wartość zmiennej $primary-color na z red na green.

Kolejne ułatwienie to wspomniane wcześniej zagnieżdżanie selektorów. Jeśli chcesz zastosować styl do akapitów (<p>) znajdujących się w elemencie <main>, napisz po prostu:

main {
    p {
        color: $secondary-color;
    }
}

Wynikowy kod CSS będzie wyglądał tak:

main p {
    color: blue;
}

Stylowanie zgodnie ze strukturą elementów w pliku HTML jest nie tylko bardziej naturalne, ale też pozwala zaoszczędzić czas i poprawia czytelność kodu. W powyższym przykładzie mamy tylko 2 elementy potomne w <main>, ale w praktyce może być ich o wiele więcej - nie musimy za każdym razem powtarzać początku selektora.

Zastosujmy teraz styl do akapitu o klasie warning:

main {
    p {
        color: $secondary-color;
        .warning {
            color: $primary-color;
        }
    }
}

Po skopiowaniu tego kodu nie widać zmian. Dlaczego? Kompilator stworzył takie selektory w pliku CSS:

main p {
    color: blue;
}

main p .warning {
    color: red;
}

Kolor czerwony będzie miał więc element o klasie warning będący potomkiem akapitu w <main>. A takiego nie mamy w kodzie strony. Aby w wynikowym kodzie CSS nie pojawiła się spacja pomiędzy p a .warning, zastosujmy znak &.

main {
    p {
        color: $secondary-color;
        &.warning {
            color: $primary-color;
        }
    }
}

Otrzymamy oczekiwany kod:

main p {
    color: blue;
}

main p.warning {
    color: red;
}

Efekt zastosowania kodu SCSS - widok z przeglądarki - Agencja Interaktywna Wrocław

Podsumowanie

Powyższe przykłady to tylko bardzo drobny wstęp, niewielki ułamek możliwości preprocesorów CSS. Jednak już samo zastosowanie zmiennych i zagnieżdżania selektorów znacząco ułatwia stylowanie. Warto się oswoić z Sassem czy Lessem, by przyspieszyć pracę nad stroną i znacząco uprościć późniejszą edycję jej kodu. Poświęcenie kilku godzin na wdrożenie i nauczenie się podstaw danego preprocesora na pewno bardzo szybko przyniesie znaczące korzyści.

keyboard_arrow_up

Szukasz efektywnej agencji interaktywnej?

Na naszą efektywność składa się ponad 10-letnie doświadczenie, stale rozwijająca się kadra specjalistów i rzetelne oraz uczciwe podejście do Klienta. Wiemy jak osiągnąć założone cele w błękitnym i czerwonym oceanie marketingu online.

Agencja marketingowa RekinySukcesu.pl to ponad 350 zadowolonych Klientów, ponad 2 000 przeszkolonych osób, ponad 500 tys. zł obsługiwanego w roku budżetu w kampaniach PPC. Sumując wszystkie dane, użytkownicy spędzili już łącznie ponad 90 lat na wyprodukowanych przez nas stronach internetowych. A nam ciągle mało. Nie uznajemy kompromisów. Dlatego warto kliknąć jeden z przycisków poniżej i umówić się na wizytę we Wrocławiu, Kłodzku lub na spotkanie online.

Zobacz inne:

close
keyboard_arrow_up