Skocz do zawartości

Sass - Preprocesor języka CSS


Keniko

Pomocna odpowiedź

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.


2sass.thumb.png.acc68d086def25f5398121a180ee85cf.png

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.

2.thumb.png.ea98c1001e00292f2e3ce05f6cd71929.png

 

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. 

3.thumb.png.eb445cf0028b38801137c9b4e3cf307d.png

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. 

  • Lubię! 2
Link do komentarza
Share on other sites

Bądź aktywny - zaloguj się lub utwórz konto!

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto w ~20 sekund!

Zarejestruj nowe konto, to proste!

Zarejestruj się »

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się »
×
×
  • Utwórz nowe...

Ważne informacje

Ta strona używa ciasteczek (cookies), dzięki którym może działać lepiej. Więcej na ten temat znajdziesz w Polityce Prywatności.