// Czysto hobbistyczny blog na temat WebDev, WordPress i Internetu

Darmowy Kurs Sass – Jak szybko ogarnąć Sass?

📆 Dodane ok. 2 miesiące temu [15-09-2019] // Mateusz Mikos // 👁 +5k // 🖊 1 komentarz

Kursy (5) Poradniki (17)

#darmowy kurs sass (1) #kursy (2) #sass (1)

Darmowy Kurs Sass – Jak szybko ogarnąć Sass?

Bez zbędnego rozpisywania się – dzisiaj przedstawiam Wam darmowy kurs Sass, w sumie to bardziej mini kurs, ale zawiera wszystko czego potrzebujecie by zacząć! Wszystko będę robił przy pomocy VSCode i rozszerzenia właśnie do tego edytora/IDE. Więcej info znajdziecie niżej.

Spis treści

Poniżej dodaję spis treści, żeby łatwiej nawigować i ewentualnie znaleźć to, czego nam potrzeba 🔍:

Czym się różni Sass od CSS?

Kim bym jednak był, gdybym nie zaserwował chociaż małego wstępu do tematu? 🥳 Jeżeli chcesz przejść już do samego kursu kliknij tutaj lub scrolluj w dół.

Sass jest to oczywiście akronim od Syntactically Awesome Stylesheets, czyli Składniowo Niesamowite Arkusze Stylów (przynajmniej ja bym to tak przetłumaczył).

Najważniejsze jest jednak to, że Sass to preprocesor CSS. Dzięki temu, że kod jest kompilowany mamy dużo nowych możliwości w porównaniu do CSSa. Kto by nie chciał napisać np. takiego kodu?

$color: #009090;
$fontSize: 12px;
$padding: 10px;
$full: 100%;

@mixin addPadding() {
    padding: $padding;
}

article {
    width: $full;
    font-size: $fontSize;
    @include addPadding();
    h1 {
        width: $full;
        text-align: center;
        font-size: $fontSize * 2;
        color: $color;
        @include addPadding();
    }
    h2, h3, h4, h5 {
        @extend h1;
        font-size: $fontSize * 1.5;
        color: lighten($color, 10%);
    }
}

Zamiast takiego kloca:

article {
    width: 100%;
    font-size: 12px;
    padding: 10px;
}

article h1 {
    width: 100%;
    text-align: center;
    font-size: 26px;
    color: #009090;
    padding: 10px;
}

article h2, article h3, article h4, article h5 {
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #00c3c3;
    padding: 10px;
}

No może nie kloca, bo długość jest porównywalna. Za to zmiana głównego koloru, stałego paddingu, czy font-size dla wielu elementów wydaje się dużo prostsze, szczególnie jak kod rozrośnie się do kilkuset linijek, prawda? 😉

W skrócie – Sass pozwala nam wygodnie korzystać ze zmiennych, dodawać selektory wewnątrz innych selektorów, odwoływać się do selektora wewnątrz którego właśnie jesteśmy, tworzyć funkcje-snippety, które możemy potem wykorzystywać, dziedziczyć właściwości z innych selektorów i wiele wiele więcej.

Darmowy Kurs Sass – Zaczynamy!

Na potrzeby tego mini kursu będę korzystał z VSCode i wtyczki Live Sass Compiler. Dodatkowo – jeżeli kogoś to ciekawi – korzystam z motywu Pitch Black i rozszerzenia Live Server, do wygodnego podglądu zmian na stronie. Użyjemy formatu SCSS, ponieważ jest on bardziej “podobny” do CSSa i łatwiejszy w przeniesieniu się. 👌

Po co nam wtyczka?

Jako, że nasz kod musi zostać skompilowany do wyjściowego pliku CSS potrzebujemy narzędzia, które wykona taką kompilację. Jeżeli nie chcecie / nie używacie VSCode możecie skorzystać z kilkunastu innych opcji, kilka z nich znajdziecie tutaj. Jedną z popularniejszych opcji jest instalacja z NPM. Ja oczywiście w poniższym tekście będę odwoływał się tylko do rozszerzenia w VSCode.

Instalacja wtyczki Live Sass Compiler

Jest to bardzo proste, jednak jakby ktoś nie był pewny, to służę pomocą. Poniżej znajdziecie listę kroków. Dodatkowo przygotowałem krótki filmik.

  1. Otwieramy VSCode.
  2. Klikamy CTRL + SHIFT + X lub za pomocą myszki klikamy w przedostatnią ikonę na lewym panelu VSCode (Extensions – Rozszerzenia).
  3. W polu wyszukiwania wpisujemy Live Sass Compiler.
  4. Wybieramy Rozszerzenie z listy i klikamy Install.

Teraz przygotujmy kilka plików

Stworzyłem sobie główny folder o nazwie sass w folderze XAMPP, dla porządku. Możecie go utworzyć nawet na pulpicie – jak Wam wygodniej. W folderze stworzyłem poniższe, podstawowe pliki, żeby móc pokazać Wam jak to wszystko działa.

darmowy kurs sass - pliki i html
Darmowy kurs Sass – Pliki i HTML

Dwa pliki – style.scss w folderze style i index.html. Nie tworzymy sami pliku style.css – tym zajmie się zaraz Live Sass Compiler. Przy domyślnych ustawieniach plik style.scss będzie kompilowany do pliku style.css w tym samym folderze. Pamiętajcie o podlinkowaniu pliku style.css w index.html! Zostanie też stworzony plik z rozszerzeniem .map do mapowania zmiennych. Więcej na temat map przeczytacie tutaj, ale jest to oczywiście opcjonalna lektura. Poniżej znajdziecie kod HTML, jeżeli chcecie sobie go skopiować:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Darmowy Mini Kurs Sass</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Darmowy Mini Kurs Sass</h1>
    </header>
    <main>
        <div class="info">
            <h3>Skorzystaj z formularza i zapisz się na kurs!</h3>
            <p>Wpisz swoje imię i adres email, aby dostać dostęp do kursu Sass.</p>
        </div>
        <div class="form">
            <form action="">
                <label for="name">Twoje imię:</label>
                <input type="text" id="name" name="name" placeholder="np. Mateusz">
                <label for="email">Twój adres email:</label>
                <input type="email" name="email" id="email" placeholder="np. moj-email@example.com">
                <input type="submit" value="Zapisz się!">
            </form>
        </div>
    </main>
</body>
</html>

Możemy już kliknąć Watch Sass i cieszyć się jego możliwościami!

Darmowy kurs Sass – Watch Sass

Po włączeniu Watch Sass pojawiły nam się dwa, wcześniej wspomniane pliki – style.css i style.css.map. Konsolę Sass możemy ukrywać/pokazywać za pomocą skrótu klawiszowego CTRL+SHIFT+U, nie musimy na nią cały czas patrzeć 🤓.

Składnia Sass (SCSS)

Zajmijmy się teraz, tym co możemy zrobić w pliku style.scss, bo właśnie w nim będziemy wprowadzać zmiany! Sama składnia SCSS jest prosta i prawie taka sama jak składnia CSS. Mamy także do dyspozycji składnię SASS, ale jest ona starsza i całkiem inna.

Zmienne

Powiecie: przecież w CSS też są zmienne! Tak są, ale kuleją, zresztą czytajcie dalej, żeby się przekonać.

Zmienne możemy tworzyć i ich używać bardzo prosto. Stwórzmy dla przykładu dwie zmienne z kolorami – kolorem podstawowym i kolorem tła.

$primaryColor: #aa5500;
$backgroundColor: #101030;

Dla porównania w CSS wyglądałoby to mniej więcej tak:

:root {
  --primary-color: #aa5500;
  --background-color: #101030;
}

Zapisujemy zmiany. Dla potwierdzenia w pasku na dole zobaczymy zielony napis Success jak poniżej:

Sukces!

Zmienne, jak widać powyżej tworzymy przy pomocy znaku dolara – $, nazwy zmiennej, dwukropka i wartości. Linijkę kończymy średnikiem.

Zanim przejdziemy dalej, przytoczę Wam śmieszny fakt, przeczytany na stronie Sass:

Zmienne, tak jak wszystkie identyfikatory Sass traktują ten _ i ten – znak jako te same znaki! Jest to mała pozostałość po pierwszych dniach Sassa, gdy pozwalał tylko na używanie znaku podkreślenia. Aby dostosować Sass do składni CSS zostały dodane myślniki. Natomiast, żeby migracja była prostsza oba znaki stały się równorzędne. Zmienna $font_size i zmienna $font-size to tak na prawdę ta sama zmienna.

Jakby powiedział znany YouTuber – koniec bajdurzenia. Wykorzystajmy zmienne:

$primaryColor: #aa5500;
$backgroundColor: #101030;
$standardPadding: 1.5em;
$headingFontSize: 1.2em;

body {
    margin: 0;
    padding: 0;
}

header {
    color: $primaryColor;
    background-color: $backgroundColor;
    padding: $standardPadding;
    text-align: center;
    font-size: $headingFontSize;
}

Nie ma tu żadnych trudnych, czy dziwnych zapisów, prawda? Taka składnia często jest porównywana do javascript.

Mamy tutaj cztery zmienne: $primaryColor, czyli kolor podstawowy, $backgroundColor, czyli kolor tła, $standardPadding, czyli jak to ładnie nazwałem standardowy padding i $headingFontSize, czyli wielkość tekstu w nagłówku.

Taki kod daje nam to w przeglądarce:

Zajrzyjmy też do samego pliku wyjściowego – style.css. Tutaj stały się bardzo ciekawe rzeczy.

body {
  margin: 0;
  padding: 0;
}

header {
  color: #aa5500;
  background-color: #101030;
  padding: 1.5em;
  text-align: center;
  font-size: 1.2em;
}
/*# sourceMappingURL=style.css.map */

Jak widać, zmienne zostały zamienione na ich wartości. Jeżeli nasze style są tworzone z dobranych, np. 5 kolorów to jest to wygodna opcja do testowania i ewentualnych zmian. Mając na przykład 1000, 3000, czy 7000 linijek CSS możemy zmienić kolory w jednym miejscu.

Zagnieżdżanie selektorów

Tego nie znajdziemy w CSS! Dzięki Sass możemy w prosty sposób zapisywać selektory jeden w drugim. Dla przykładu zajmijmy się teraz elementem div o klasie .info. “info” to niezbyt oryginalna nazwa klasy, dlatego dobrze by było w samym CSS podkreślić, że chodzi nam o właśnie to .info, które znajduje się wewnątrz main:

main {
    // tu mamy style dla main
}

main .info {
    // tu mamy style dla .info w main
}

main .info p {
    // style dla paragrafu w .info w main
}

A teraz zróbmy to w Sass:

main {
    background-color: $primaryColor;
    padding: $standardPadding;
    .info {
        color: white;
        text-align: center;
        font-size: $headingFontSize;
        p {
            font-size: 0.7em;
            padding-bottom: $standardPadding;
        }
    }
}

Pamiętajcie, nie są to pięknie dobrane kolory, typografia i styl godny 2019 roku🐱‍💻. Mam nadzieję, że przez tak brzydki efekt ten mały kurs zostanie Wam w pamięci. Poniżej podgląd:

Efekt zagnieżdżania

Dobrą praktyką jest tworzenie ograniczonych zagnieżdżeń, do trzech selektorów “głębokości”, np.:

nav {
    // ...
    ul {
        // ...
        li {
            // ...
        }
    }
    .logo {
        // ...
    }
}

Za to wygodnie jest omijać takiego zapisu, ale wszystko zależy od Was 😉:

body {
    // ...
    main {
        // ...
        .left-column {
            // ...
            article {
                // ...
                h1 {
                    // ...
                }
                p {
                    // ...
                }
            }
        }
    }
}

Przy rozrastającym się projekcie może się to stać nieczytelne.

Prefixy dla każdej przeglądarki

To jest kolejna wygodna sprawa w Sass. Dokładnie jest to wygodna sprawa zagwarantowana przez wtyczkę do VSCode, ale występuje też w większości innych kompilatorów. Znacie na pewno takie właściwości, które potrzebują prefixów, aby działać w różnych przeglądarkach, oto kilka z nich:

// Przejścia:
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;

// Box sizing:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

A kto próbował ostylować scrollbar na pewno o nich nie zapomni 😂. Powyższe przykłady mogą być już “przeterminowane”. Z każdą nową wersją przeglądarek poprawia się obsługa nowych właściwości bez prefixu. Nie warto więc sprawdzać czy dana właściwość zadziała bez prefixu lub szukać go w internecie. Lepiej po prostu użyć Sass. Zapis:

main {
    background-color: $primaryColor;
    padding: $standardPadding;
    
    .info {
        color: white;
        text-align: center;
        font-size: $headingFontSize;
        box-sizing: border-box;

        p {
            font-size: 0.7em;
            padding-bottom: $standardPadding;
        }
    }
}

Daje nam w wyjściowym pliku CSS:

main .info {
  color: white;
  text-align: center;
  font-size: 1.2em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

Sass robi to za nas. Możemy zająć się spokojną pracą nad stylami – nie musimy myśleć o kompatybilności.

Ampersand (&) w Sass

To jest dopiero świetne narzędzie. Najprościej rzecz ujmując – ampersand odzwierciedla selektor, wewnątrz którego jesteśmy. Możemy go użyć, np. do stworzenia selektora dla dwóch klas:

.more-info {
    // Style dla .more-info
    &.read-more {
        // Style dla .more-info.read-more
    }
}

Co w CSS wyglądało by tak:

.more-info {
    // Style dla .more-info
}

.more-info.read-more {
    // Style dla .more-info.read-more
}

Możemy też użyć ampersand do pseudo klas, na przykład w naszym kodzie:

$primaryColor: #aa5500;
$backgroundColor: #101030;
$standardPadding: 1.5em;
$headingFontSize: 1.5em;
$hoverHeadingFontSize: 2em;

body {
    margin: 0;
    padding: 0;
}

header {
    background-color: $backgroundColor;
    padding: $standardPadding;
    text-align: center;
    h1 {
        color: $primaryColor;
        font-size: $headingFontSize;
        transition: all 1s;
        
        &:hover {
            font-size: $hoverHeadingFontSize;
        }
    }
}

Powyżej trochę zmieniłem zmienne i dodałem style dla header h1 i header h1:hover. W przeglądarce oczywiście wszystko działa:

Darmowy kurs Sass – Ampersand

@import – importowanie plików CSS i SCSS

Chociaż nasz plik wyjściowy jest jeden to dla naszej wygody możemy podzielić .scss na kilka plików i to bez żadnego problemu. Załóżmy, że oddzielimy sobie zmienne od selektorów. Wytnijmy ten fragment z pliku style.scss:

$primaryColor: #aa5500;
$backgroundColor: #101030;
$standardPadding: 1.5em;
$headingFontSize: 1.5em;
$hoverHeadingFontSize: 2em;

I dodajmy nowy plik w folderze css – nazwijmy go na przykład vars. Zasadą jest, aby pliki przeznaczone tylko do importu zaczynały się od znaku underscore _. Stwórzmy plik _vars.scss i wklejmy tam zmienne:

Tworzenie pliku _vars.scss

Następnie importujemy go w głównym pliku style.scss. Skorzystamy tutaj z poniższego kodu:

// Gdy nie chcemy lub nie musimy (nie ma innego typu pliku o tej samej nazwie) podawać rozszerzenia:
@import 'vars';
// Lub:
@import '_vars.scss';

Jak widać Sass jest sprytny i znajdzie dla nas odpowiedni plik, nawet jak uprościmy import do kodu powyżej.

Import pliku _vars.scss

Jako, że ten import wykonuje się w trakcie kompilacji (a nie podczas ładowania strony, jak ma to miejsce w CSS) unikamy dodatkowych zapytań HTTP.

Oczywiście w plikach .scss nadal możemy wykorzystywać @import znany z CSSa. Aby import został wykonany jak standardowa instrukcja w CSS URL musi się kończyć rozszerzeniem .css, zaczynać od http:// lub https://, być zapisany w formacie url('...'), albo media queries.

Funkcja – mixin

Mixiny to takie można powiedzieć bloki kodu, które mogą być używane wiele razy, w różnych miejscach. Tak jak funkcje. Głównym celem każdego mixina jest unikanie dziwnych klas, takich jak .left-column, czy .right-column. Co najważniejsze – ułatwiają i skracają pracę. Powiedzmy, że chcemy dodać border do kilku elementów, bez dodawania go do każdego selektora. Tworzymy więc mixin, o wybranej nazwie, który zastąpi nam wpisywanie kodu:

@mixin bottomBorder() {
    border-bottom: 4px solid $secondaryColor;
    border-left: 1px solid $secondaryColor;
    border-right: 1px solid $secondaryColor;
    border-top: 1px solid $secondaryColor;
}

Teraz możemy użyć naszego mixina bottomBorder w wybranych miejscach za pomocą kodu:

include bottomBorder();

Przy okazji dodałem dodatkową zmienną $secondaryColor = #582c00;.

Dla wygody i małego porządku mixin stworzyłem w pliku _vars.scss:

No i mamy gotowy efekt w przeglądarce:

Czyż to nie wygląda pięknie? ✨ To oczywiście nie wszystko, na co pozwala nam @mixin. Możemy korzystać z argumentów i argumentów opcjonalnych:

// Mixin z argumentem:
@mixin txtCol ($color) {
    color: $color;
}
// Użycie
@include txtCol(#004400);

// Mixin z argumentem opcjonalnym:
@mixin txtCol ($color: #004400);

// Użycie z podaniem koloru:
@include txtCol(#fafafa);

// Użycie domyślnego koloru (bez podawania argumentu):
@include txtCol();

Dodajmy teraz kilka argumentów do naszego bottomBorder().

@mixin bottomBorder($bottom: 5px, $other: 1px, $color: $secondaryColor) {
    border-bottom: $bottom solid $color;
    border-left: $other solid $color;
    border-right: $other solid $color;
    border-top: $other solid $color;
}

Dzięki temu, korzystając z bottomBorder możemy opcjonalnie dodać inną wartość dla szerokości dolnego obramowania, inną wartość dla reszty obramowania i kolor. Zmieńmy drugie użycie @mixin:

@include bottomBorder(10px, 5px, #0033aa);

A tutaj cała procedura:

Jak widać, wszystko działa prawidłowo – w przeglądarce wszystko wygląda tak źle, jak to zapisaliśmy 😃.

@extend – dziedziczenie stylów

Dzięki @extend możemy wziąć wszystkie właściwości przypisane do danego selektora i dodać je do innego selektora. Przykładowo w CSS i HTML możemy mieć taki kod:

<style>
    .warning {
        color: white;
        font-weight: bold;
        background-color: #ad0f03;
        padding: 0.5em;
    }

    .big-warning {
        font-size: 1.2em;
        padding: 1em;
    }
</style>

<div class="warning">
   <p>To jest zwykłe ostrzeżenie.</p>
</div>

<div class="warning big-warning">
    <p>To jest duże ostrzeżenie!</p>
</div>

Może to być też napisane na kilka innych sposobów (na przykład dwie oddzielne klasy z podobnym kodem). Dzięki @extend, nie musimy ani przypisywać dwóch klas dla drugiego diva, ani powtarzać wpisywania tych samych właściwości, wystarczy w HTML:

<div class="warning">
   <p>To jest zwykłe ostrzeżenie.</p>
</div>

<div class="big-warning">
    <p>To jest duże ostrzeżenie!</p>
</div>

A w samym style.scss:

.warning {
    color: white;
    font-weight: bold;
    background-color: #ad0f03;
    padding: 0.5em;
}

.big-warning {
    @extend .warning;
    font-size: 1.2em;
    padding: 1em;
}

Możemy to zapisać jeszcze krócej, zmieniając trochę nazwę klasy .big-warning i korzystając z wcześniej wspomnianego ampersanda:

.warning {
    color: white;
    font-weight: bold;
    background-color: #ad0f03;
    padding: 0.5em;

    &-big {
        @extend .warning;
        font-size: 1.2em;
        padding: 1em;
    }
}

Dostajemy dwie klasy – .warning i .warning-big, ta druga korzysta z właściwości pierwszej i ma swoje dodatkowe, bez zbędnego kodu. Poniżej użycie tego w naszym przykładzie:

Stworzyliśmy sobie prosty styl dla przycisku wysyłania formularza, następnie za pomocą @extend rozszerzyliśmy style pola #name i #email. Za pomocą &::placeholder dodaliśmy też pseudoklasę (i prefixy!), która pozwoliła na zmianę koloru tekstu zastępczego.

Funkcje kolorów

Dzięki zmiennym możemy już łatwo dodać główne kolory do naszych stylów i korzystać z nich do woli. Dodatkowo, Sass daje nam możliwość korzystania z funkcji, które generują kolory np. na podstawie innych kolorów. Dzięki tym funkcjom możemy ograniczyć ilość kolorów do minimum zachowując ich bardzo szeroką paletę na końcowej stronie. Zobaczmy, co dają funkcje kolorów.

Odwracanie koloru – invert()

Chcesz odwrócić kolor? Nie ma problemu! Skorzystaj z funkcji invert(). Funkcja ta przyjmuje dwa argumenty – wejściowy kolor i “wagę” w procentach (0% – 100%). Sprawdźmy zatem, co stanie się z naszym nagłówkiem:

Jak widać – im druga wartość jest mniejsza, tym bliżej jej do wejściowego koloru, im wyższa tym bliżej jej do odwrotnego koloru.

Jaśniejszy kolor – lighten()

Zamiast korzystać z kilku podobnych kolorów możemy wykorzystać funkcję lighten(), która daje nam do dyspozycji możliwość rozjaśnienia koloru wejściowego. Funkcja ta przyjmuje dwa argumenty – kolor wejściowy i wartość, o którą ma zostać on rozjaśniony. Tę opcję przetestujemy z tagiem main:

Ciemniejszy kolor – darken()

Funkcja darken() pozwala na to samo co funkcja wyżej, tylko w odwrotną stronę – możemy przyciemnić kolor.

Skala szarości – grayscale()

Nie znalazłem zbytnio zastosowania dla tej funkcji, ale jest ciekawa i warto ją przetestować! Tak jak sama nazwa wskazuje, funkcja ta wyciąga saturację koloru i zostawia go w odcieniu szarości. Jako, że ta funkcja ustala saturację na 0 przyjmuje tylko jeden argument – kolor wejściowy.

Więcej funkcji kolorów

To jest oczywiście tylko garstka dostępnych funkcji. Po więcej zapraszam do Color Functions.

Obliczenia w SCSS

Nasz Sass, oprócz tego wszystkiego potrafi liczyć i do bardzo sprawnie. Sprawdźmy to:

Oprócz dodawania, odejmowania, mnożenia i dzielenia mamy do dyspozycji też m.in. modulo, bezwzględną wartość, zaokrąglanie w dół, czy zaokrąglanie w górę:

I na koniec liczb – losowe wartości, czyli funkcja random(). Funkcja wykonana bez parametru daje losową liczbę od 0 do 1. Natomiast po podaniu parametru większego, bądź równego jeden losową liczbę od 1 do parametru właśnie.

Więcej funkcji matematycznych

Po więcej funkcji matematycznych w Sass odsyłam Was tutaj.

Podsumowanie – darmowy kurs Sass

Tak jak wspomniałem kilka razy w tym wpisie to jest mini kurs. Nawet nie kurs, tylko takie zapoznanie z tematem. Polecam kliknięcie CTRL+D lub ⭐ (jeżeli czytacie na telefonie) i powrót tutaj, gdy będzie taka potrzeba. Ten wpis jest pierwszym z wielu mini i trochę większych “kursów”, które chcę zamieszczać w najbliższym czasie na aimweb. Dla tego typu treści powstała także nowa kategoria – Kursy. Dajcie znać w komentarzach, co mogę poprawić (na pewno zminimalizować chaotyczność) i czy chcielibyście oprócz formy “czytanej” także wersję wideo. 🧐

1
Zostaw komentarz i dołącz do dyskusji:

1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
najnowszy najstarszy oceniany
Kurs Electron - Głupiutki Kalkulator z HTML, CSS i JS - aimweb.pl

[…] jak wspomniałem wcześniej, będę korzystał z Sass, więc ponownie polecam zajrzenie do wpisu Darmowy Kurs Sass. Dla tych, których nie interesuje Sass dodam cały plik CSS pod instrukcjami. Najpierw zajmijmy […]