Podstawy SASS – struktura kodu, importy, zmienne, mixiny i extendy.

4/7/2018

Jeśli interesujesz się Web Developmentem to może słyszałeś/aś o SASS’ie. Jeśli sam/a jesteś Developerem to napewno go znasz. Jest on aktualnie jednym z kluczowych narzędzi do tworzenia stron i aplikacji internetowych. W tym wpisie przeczytasz o jego podstawowych właściwościach.

Czego się dzisiaj dowiesz?

Czym jest SASS i jak używać go w swojej pracy. Opiszę jego podstawowe właściwości i spróbuje wyjaśnić każdą z nich. Ten wpis zakłada, że masz już podstawową znajomość CSS’a

Dlaczego to piszę?

SASS nie jest wiedzą najnowszą. Funkcjonuje na rynku już od kilku lat. Paradoksalnie w odróżnieniu od wielu technologii webowych które mają stosunkowo krótki cykl życia SASS ciągle stoi na warcie. To znaczy, że jest dobry. Jeśli jest dobry to trzeba go znać.

Najprawdopodobniej znasz już SASS’a. Ten wpis może Ci pomóc usystematyzować swoją wiedzę. Jeśli go nie znasz to pomoże Ci wejść w temat. Od tego jest właśnie blog bedekodzic.pl 🙂 A serii o tym świetnym narzędziu do tej pory tu nie było.

Seria SASS

W skład serii wchodzą:

  1. Podstawy SASS – struktura kodu, importy, zmienne, mixiny i extendy.
  2. RWD i SASS. Jak sobie z tym poradzić? Mobile First vs Desktop First.
  3. Zaawansowany SASS – funkcje, pętle i logika.

Czym jest SASS?

Jest on pre-procesorem CSS. Pozwala na użycie specjalnej składni która jest potem kompilowana na “czysty” CSS interpretowany przez przeglądarkę.

W praktyce znaczy to tyle, że dostajesz dostęp do metod które pozwalają stylować widoki szybciej, wygodniej, kod jest bardziej przejrzysty a ostateczny rozmiar pliku .css powinien być mniejszy.

Jak zacząć pracę z SASS?

To nie jest częścią tego wpisu jednak odsyłam Cię do tego tutoriala:

W razie gdyby coś dalej było niejasne to pomocna jest oficjalna dokumentacja

Podstawowe właściwości SASS

Teraz będę opisywał kolejne funkcje SASS’a. Krok po kroku.

Zagnieżdżanie elementów – Nesting

Ta właściwość pozwala na łatwiejszy dostęp do poszczególnych elementów/selektorów. Załóżmy, że mamy takie drzewo DOM:

<section class="main">
    <div class="main_first">
        <h2 class="main_first-title">Hello</h2>
        <img class="main_first-image" src="" alt="">
    </div>
    <div class="main_second">
        <h2 class="main_second-title">Goodbye</h2>
    </div>
</section>

Teraz dla porównania ostyluje te elementy za pomocą CSS a potem SASS’a używając nestingu.

Zanim jednak zacznę, pamiętaj aby stylować elementy za pomocą selektorów klas np. “.main”! Poza wyjątkami ( jak np. nagłówki h1-h6 które ustawia się globalnie przy pomocy tagów HTML ) w CSS używa się tylko klas! Tagi HTML i id służą do innych rzeczy. Najlepiej odrazu przyjąć jakąś metodykę nazewnictwa np. BEM. Wracamy do kodu…

Poniżej przykładowe style w CSS:

.main {
    height:100px;
}

.main .main_first {
    height: 50px;
}

.main .main_first .main_first-title {
    color: red;
}

.main .main_first .main_first-image {
    opacity: 0.6;
}

.main .main_second {
    height: 50px;
}

.main .main_second .main_second-title {
    font-size: 30px;
}

Do każdego elementu musimy się dostać manualnie… Bardzo męczące… Można też ominąć poprzednie selektory… ale jest wtedy chaos… Jak to zrobić w SASS?

.main {
    height:100px;
    .main_first{
        height: 50px;
        .main_first-title {
            color: red;
        }
        .main_first-image {
            opacity: 0.6;
        }
    }
    .main_second {
        height: 50px;
        .main_second-title {
            font-size: 30px;
        }
    }
}

Po prostu zagnieżdżamy elementy podrzędne w nadrzędnych zachowując odpowiednią strukturę. Prawda, że dużo łatwiej i szybciej? Ostatecznie SASS kompiluje nasz kod na coś co wygląda podobnie do przypadku podanego w klasycznym CSS. Tak właśnie działa nesting.

Struktura plików – imports

Kod SASS jest łatwiejszy w utrzymaniu niż klasyczny CSS a to głównie za sprawą odpowiedniej struktury plików. O co chodzi?

Nasze style rozrastają wraz ze stopniem zaawansowania projektu. W ostateczności dostajemy ogromy plik .css z masą kodu w którym ciężko się połapać… Dobrze by to jakoś podzielić na segmenty/ komponenty…

Problem pojawia się gdy pliki .css muszą być podpięte do pliku .html. Każdy plik to osobny link więc też osobny zasób. Czyli kolejny request/żądanie przy ładowaniu strony. Strata wydajności…

Oczywiście narzędzia do automatyzacji jak Gulp czy Webpack mogą nam w tym pomóc np. poprzez konkatenację plików .css ale lepiej załatwić to odrazu z poziomu SASS’a.

Imports

Koncepcja polega na tym, że definiujemy główny plik .scss do którego podpinamy inne pliki odpowiedzialne za konkretny rodzaj styli. Jak to może wyglądać?

style/
   main.scss
   _fonts.scss
   _colors.scss
   _mixins.scss
   _animations.scss

Powyższa struktura posiada jeden plik główny i 4 pliki podrzędne posiadające prefix “_” odpowiadające odpowiednio za czcionki, kolory, mixiny ( o tym potem ) i animacje. Oczywiście architektura struktury styli musi być dostosowana do potrzeb i plików podrzędnych może, a nawet musi być nieco więcej.

Ważną kwestią jest nazwa plików podrzędnych tzn. prefix “_”. Jeśli o nim zapomniemy kompilator potraktuje go jako plik główny i możemy zauważyć dodatkowy plik .css w odpowiednim folderze. Tego nie chcesz, przynamniej nie przypadkowo…

Importowanie plików

Skoro już wiesz jak to wszystko zaplanować to trzeba te pliki razem pospinać. Tu sprawa jest bardzo prosta.

W plikach podrzędnych piszesz sobie kod jak gdyby nigdy nic 🙂

W pliku głównym należy dodać formułę @import. Dla naszego przykłady wygląda to np. tak:

body {
    margin: 0;
    padding: 0;
}

/*-----COLORS------*/
@import "colors";
/*——————————*/

/*-----FONTS------*/
@import "fonts";
/*——————————*/

/*-----MIXINS------*/
@import "mixins";
/*——————————*/

/*-----ANIMATIONS------*/
@import "animations";
/*——————————*/

W ten sposób wszystkie pliki zostaną skompilowane do jednego pliku .css.

Teraz wiedząc, że mamy problem np. z czcionkami czy kolorami możemy odrazu sprawdzić właściwy plik .scss i dużo łatwiej namierzyć błąd.

CSS jest interpretowany od góry do dołu tzn. reguły niżej są ważniejsze, jednak jeśli wykorzystują zależności które są zdefiniowane jeszcze niżej to otrzymamy błąd. Jest to szczególnie ważne przy importach. Jeśli plik _fonts będzie chciał użyć regułę zdefiniowaną w pliku _mixins to niestety się nie uda. Jeśli import _fonts byłby pod importem _mixins… To wtedy tak 🙂

To by było na tyle w temacie importów…

Zmienne – variables

Kolejna właściwość czyli coś na kształt zmiennych np. w JSie 🙂 Najłatwiej będzie to wytłumaczyć na przykładzie sprzed kilku akapitów. Tak wygląda kod bez zmiennych:

.main {
    height:100px;
    .main_first{
        height: 50px;
        .main_first-title {
            color: red;
            font-size: 36px;
        }
        .main_first-image {
            opacity: 0.6;
            
        }
    }
    .main_second {
        height: 50px;
        .main_second-title {
            font-size: 30px;
        }
    }
}

A teraz dodajmy kilka zmiennych. Przy deklaracji używa się prefiksu $ :

// variables

$cont-height: 100px;
$row-height: 50px;
$head-color: red;
$head-size: 36px;
$sec-dead-size: $head-size - 6px;

.main {
    height: $cont-height;
    .main_first {
        height: $row-height;
        .main_first-title {
            color: $head-color;
            font-size: $head-size;
        }
        .main_first-image {
            opacity: 0.6;
        }
    }
    .main_second {
        height: $row-height;
        .main_second-title {
            font-size: $sec-dead-size;
        }
    }
}

I jak się podoba? Pozornie ten kod wygląda na bardziej skomplikowany bo większość właściwości przypisujemy do zmiennych jednak to jest bardzo pomocne…

Jeśli chcemy zmienić wszędzie rozmiar czcionki, kolor, czy cokolwiek innego nie musimy przeszukiwać całego kodu i zmieniać tego manualnie w każdym miejscu… Wystarczy zmiana przy deklaracji zmiennej i cała reszta się pięknie dostosowuje do Naszych potrzeb 🙂

Jak pewnie zauważyliście możliwe są też proste operacje matematyczne na zmiennych. Pamiętajcie tylko o zachowaniu odpowiednich jednostek bo nie da rady odjąć % od px, rem czy vw 🙂

Miksiny / Mixins

Zaczynamy coraz ciekawsze tematy. Czym są miksiny? A raczej czym jest mixin?

Jest to pewna właściwość która pozwala zebrać kilka właściwości i zdeklarować je pod jednym “hasłem”, słowem kluczowym. Jest on bardzo przydatny w miejscach gdzie podobny zestaw reguł powtarza się wielokrotnie w naszym kodzie. Popatrzmy na przykład:

.main {
    height: 100px;
    .main_first {
        height: 50px;
        margin-top: 25px;
        background-color: green;
        color: yellow;
        .main_first-title {
            color: red;
        }
        .main_first-image {
            opacity: 0.6;
        }
    }
    .main_second {
        height: 50px;
        margin-top: 25px;
        background-color: green;
        color: yellow;
        .main_second-title {
            font-size: 30px;
        }
    }
}

Powyżej stylujemy dwa elementy dokładnie w ten sam sposób. Przepisujemy te same reguły… Nasz roboczy kod się niepotrzebnie rozrasta. Wszystko się nieco rozmywa. Jak pomóc sobie mixinem?

@mixin container {
    height: 50px;
    margin-top: 25px;
    background-color: green;
    color: yellow;
}

.main {
    height: 100px;
    .main_first {
        @include container;
        .main_first-title {
            color: red;
        }
        .main_first-image {
            opacity: 0.6;
        }
    }
    .main_second {
        @include container;
        .main_second-title {
            font-size: 30px;
        }
    }
}

Kod który przed chwilą przejrzałeś/aś ma zdeklarowany mixin container w którym zamieszczam powtarzające się reguły CSS. Następnie w odpowiednim miejscu wywołuje ten mixin za pomocą słowa kluczowego @include. Magii nie ma a właściwość naprawdę przydatna.

Mixin i parametry

Mixin może też posiadać swoją wariację w postaci mixinu z parametrami. O co chodzi?

Czasem pomimo, że chcemy zaaplikować ten sam zestaw reguł to jedna lub więcej właściwości może się lekko różnić np. jeden kontener ma być wyższy. Wtedy przyda się parametr w mixinie…

Poniżej przykład połączony z użyciem zmiennej:

//zmienna
$row-height: 50px;

//mixin i 2 parametry
@mixin container($bg-color, $txt-color) {
    //wykorzystuje zmienna
    height: $row-height;
    margin-top: 25px;
    //wykorzystuje 1 parametr
    background-color: $bg-color;
    //wykorzystuje 2 parametr
    color: $txt-color;
}

.main {
    height: 100px;
    .main_first {
        // wywoluje mixin uzywajac roznych parametrow
        @include container(green, red);
    }
    .main_second {
        @include container(red, blue);
        .main_second-title {
            font-size: 40px;
        }
    }
}

W ten sposób mamy sporo elastyczności i mixiny nabierają pełnej mocy 🙂

Extends

I w ten sposób dobijamy do ostatniego elementu SASS’a w dzisiejszym wpisie. Czyli mechanizm extends. Sam nie wiem, czy nazwa placeholder jest w tym wypadku prawidłowa?

Działa to podobnie do mixina:

$row-height: 50px;

//deklaruje extenda
%container {
    height: $row-height;
    margin-top: 25px;
    background-color: blue;
    color: red;
}

.main {
    height: 100px;
    .main_first {
        //wywoluje extenda
        @extend %container;
    }
    .main_second {
        @extend %container;
        .main_second-title {
            font-size: 40px;
        }
    }
}

Zasadniczo zamiast deklarować extenda używając składni “%container” można to zrobić np. używając kropki czyli “.container” ale ten sposób jest identyczny do normalnego wywoływania klas. Może się to mylić. Sposób z przykładu jest bardziej czytelny.

Mixin vs Extend

Ktoś mógłby zadać pytanie: czym się w sumie różnią te dwa mechanizmy? Przecież wyglądają identycznie…

Racja, jednak różnica w działaniu jest zasadnicza…

Po pierwsze…

Extend nie może używać parametrów. Jest więc mniej elastyczny od mixina.

Po drugie…

Extend jest konwertowany do czystego CSS’a w inny sposób. Na przykład:

Extend

Ten kod:

.main_first {
    @extend %container;
}

.main_second {
    @extend %container;
}

Jest widziany przez przeglądarkę jako:

.main_first,.main_second {
    height: 50px;
    margin-top: 25px;
    background-color: blue;
    color: red;
}

Mixin

Natomiast ten kod:

.main_first {
    @include container
}

.main_second {
    @include container 
}

Jest widziany jako:

.main_first {
    height: 50px;
    margin-top: 25px;
    background-color: blue;
    color: red;
}

.main_second {
    height: 50px;
    margin-top: 25px;
    background-color: blue;
    color: red;
}

Mamy więc niemal dwa razy więcej kodu CSS…

Wnioski

Mixin jest lepszy gdy powtórzeń w regułach CSS jest stosunkowo niewiele lub te repetycje mają subtelne różnice gdzie do gry wchodzą parametry.

Extend jest lepszy gdy powtórzeń jest więcej i są one dokładnie takie same. Użycie tej techniki nie tylko usprawnia pisanie ale redukuje rozmiar skompilowanego pliku .css poprzez uniknięcie powtórzeń.

Co dalej?

Oczywiście jak zawsze praca własna i samodzielne poszukiwanie materiałów jest niezastąpione jednak jeśli ten wpis był dla Ciebie przydatny to wiedz, że będzie więcej artykułów o tej tematyce 🙂

Podsumowanie

SASS to super narzędzie które znacząco usprawnia pracę. Jeśli do tej pory nie byłeś/aś przekonany/a to teraz już pewnie jesteś!

Please follow and like us:
0

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?

WARTO
Social media & sharing icons powered by UltimatelySocial