Sass - Preprocesor języka CSS

Keniko · Kwiecień 9, 2021

Czym jest Sass?

Sass (Syntactically Awesome Stylesheet) to w pełni darmowy, jeden z popularniejszych preprocesorów CSS. Wykorzystuje się go do tworzenia wydajniejszych i bardziej przejrzystszych arkuszy stylów. Składnia jest podobna do tej z CSS, różni się tylko kilkoma funkcjami, które jeszcze nie są obsługiwane w CSS.

Instalacja Sassa

Uważam, że nauka obsługi wiersza poleceń jest bardzo przydatna gdy chce się rozpocząć przygodę z tworzeniem stron, ale jeśli dopiero zaczynasz, wiersz poleceń może wydać się trudny i zniechęcić do dalszej nauki, dlatego przedstawię Wam najprostszą metodę instalacji Sass.

Z racji tego, że nasz kod będzie miał rozszerzenie .scss potrzebujemy kompilatora który przetłumaczy go na język zrozumiały przez wszystkie przeglądarki (.css). Wykorzystamy do tego popularny edytor kodu - Visual Studio Code, jest to program w pełni darmowy z olbrzymią biblioteką rozszerzeń.

Po zainstalowaniu aplikacji należy przycisnąć klawisz Extensions po lewej stronie ekranu lub wykorzystać skrót klawiszowy Ctrl+Shift+X, następnie wyszukujemy rozszerzenie Live Sass Compiler i instalujemy je.

W następnym kroku tworzymy dwa pliki: index.html i style.scss. W utworzonym pliku style.scss wpisujemy prosty kod aby sprawdzić czy nasza instalacja przebiegła pomyślnie.

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body> 
</body>
</html>

body{
    background: red;
}

Klikamy Ctrl+S (skrót do zapisywania pliku) w tym momencie powinna ukazać się ikonka na dole ekranu z napisem Watch Sass. Po jej kliknięciu wygeneruje się plik z rozszerzeniem .css. Tak utworzony plik podpinamy do naszego HTML. Od tego momentu rozszerzenie będzie nadpisywało plik style.css za każdym razem, kiedy zapiszemy plik style.scss. Jeśli wszystko przebiegło pomyślnie tło naszej strony powinno być czerwone.

Teraz skoro mamy pewność, że wszystko działa możemy przejść do nauki podstaw Sassa.

Zmienne

Dzięki nim możemy przechowywać informacje (kolor, wartość itp.), które będą wykorzystywane wielokrotnie w kodzie. Dzięki takiemu rozwiązaniu możemy zmieniać wiele wartości jednym kliknięciem, jak na przykład rozmiary divów. Zmienne te tworzymy przy użyciu znaku dolara - $.

Składania wygląda następująco:

$nazwa_zmiennej: wartość;

Przykład zastosowania:

$kolor: grey;

body{
    background: $kolor;
}

.footer_icon{
    background: yellow;
    color: $kolor;
}

Mixiny

Wykorzystując mixiny nie musimy już powtarzać wiele razy tego samego wycinka kodu, jest to bardzo przydatne zwłaszcza przy tworzeniu cieni dla wielu różnych elementów.

Deklaracja mixina wygląda następująco:

@mixin nazwa {
    //kod
}

a wywołujemy go w następujący sposób:

@include nazwa;

Przykład zastosowania:

@mixin shadow {
    border: 1px solid #BFBFBF;
    box-shadow: 10px 10px 5px #aaaaaa;  
}

@mixin padding {
    padding: 1rem 2vw 1rem 2vw;
}


.menu_icon{
    width: 28px;
    height: 28px;
    @include shadow;
    @include padding;
}

.footer_icon{
    color: red;
    width: 28px;
    height: 28px;
    @include shadow;
}

Zagnieżdżenia

Sass umożliwia zagnieżdżenie selektorów CSS w taki sam sposób, jak to robi HTML. Ułatwia nam to sytuacje ponieważ nie musimy powtarzać wiele razy tego samego, a tym samym oszczędzamy czas.

Znak & wykorzystujemy aby dopisać rodzicowi klasę lub pseudoklase.

.menu_icon{
    background: red;
    width: 100vw;
    height: 3rem;
   
    .icon_el{
        padding: 20px;
        background: grey;
    }

    &:active{
        text-decoration:underline;
    }
}

Podsumowanie

Bardzo się cieszę, żę dotrwałeś do tego momentu! Mam także nadzieje, że udało mi się przekazać podstawowe zagadnienia preprocesora w prosty sposób.

Treker · Kwiecień 12, 2021

@Keniko witam na forum! Wpis został właśnie zaakceptowany i jest już widoczny publicznie 🚀

Sass - Preprocesor języka CSS

Pomocna odpowiedź

Keniko

Link do komentarza

Share on other sites

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Quizy

Najnowsze posty w innych tematach

problem z grą na mit app inventor

(Kolejny) Generator wysokiego napięcia

Sprawdzenie płytki PCB i zastąpienie przekaźników elementami półprzewodnikowymi 1 2

Własny protokół dwużyłowy z jedną linią danych - Implementacja programowa. 1 2

Serwomechanizm porada

Inne