Kurs SASS dla początkujących cz.1 Zagnieżdżanie, zmienne i domieszki

W tym kursie pokażę Ci jak przy użyciu preprocesora SASS znacznie przyśpieszyć proces tworzenia stron internetowych. W pierwszej części omówimy zagnieżdżanie reguł, zmienne oraz domieszki.

Preprocesory CSS takie jak SASS lub LESS dają nam możliwość używania w stylach CSS funkcjonalności wcześniej nie dostępnych takich jak domieszki (które przypominają trochę funkcje), zmienne, pętle, operatory matematyczne itd.

Przy odpowiednim użyciu SASS jest w stanie znacznie przyśpieszyć proces pisania stylów a duża część napisanego w poprzednich projektach kodu może zostać natychmiast użyta w innych projektach.

Przeglądarki nie rozumieją kodu napisanego w SASS dlatego musimy znaleść sposób na przekonwertowanie kodu SASS do czystego CSS. Na szczęście istnieje sporo aplikacji, które zrobią to za nas. Świetnym i darmowym programem tego typu jest Koala. Inne tego typu programy możesz znaleść tutaj.

Aby pobrać Koala wejdź na tą stronę i naciśnij przycisk Download. Po instalacji otwórz program. Pokaże się podobne okno:

koala

Kolejną rzeczą, o którą musimy zadbać jest podświetladnie składni SASS. Duża część edytorów nie rozpoznaje plików SASS (.scss) i nie koloruje składni. Jeśli Ci to nie przeszkadza to możesz po prostu przejść dalej. Domyślnie SASS wspiera Atom, Sublime text i jeszcze kilka innych edytorów. Jeśli jak ja korzystasz z Atom a składnia w plikach .scss nie jest pokolorowana to przejdź do Packages –> Settings View –> Open. Wybierz zakładkę Install i w wyszukiwarkę wpisz „language-sass” i obok pakietu o tej nazwie naciśnij przycisk Install (lub Enable jeśli pakiet był już zainstalowany).

Abyś nie tracił czasu na tworzenie struktury plików zrobiłem to za Ciebie. Gotowy folder możesz pobrać tutaj. Po pobraniu i wypakowaniu archiwum otwórz okno Koala i przeciągnij folder css  w obszar okna. Zobaczysz coś takiego:

koala folder

Po naciśnięciu przycisku Refresh pliki zostaną przekompilowane do plików CSS:

koala konwersja

Od tej pory przy każdym zapisie dowolnego z plików całość będzie kompliowana – nie musimy tego robić ręcznie. Zmienne będziemy umieszać w pliku zmienne.scss. Domieszki w domieszki.scss. Plik reset.scss resetuje style przeglądarki i nie będziemy go modyfikować. Stylować elementy będziemy w style.scss (zauważ, że importuje on reset, zmienne i domieszki z pozostałych plików). Ten plik jest kompilowany do pliku style.css i następnie podpięty w index.html.

Zagnieżdżanie reguł

Zagnieżdżanie znacznie przyśpiesza pisanie stylów. Zamiast pisać:

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding-top: 30px;
}
.wrapper h1 {
  font-size: 36px;
}
.wrapper h2 {
  font-size: 28px;
}
.wrapper h3 {
  font-size: 24px;
}
.wrapper p {
  font-size: 12px;
}
.wrapper a {
  text-decoration: none;
}
.wrapper a {
  color: #bdce80;
}
.wrapper a:hover {
  color: #e3985e;
}

Napiszemy:

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding-top: 30px;
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 24px;
  }
  p {
    font-size: 14px;
  }
  a {
    color: #bdce80;
    text-decoration: none;
    &:hover {
     color: #e3985e;
    }
  }
}

Zauważ, jak skraca się kod. Do klasy .wrapper odwołujemy się tylko raz. Po zapisaniu pliku style.scss zobaczysz, że kod działa. W wynikowym pliku style.css znajdzie się kod w pierwszej wersji. Przy stylowaniu elementu a użyliśmy &:hover. Znak & oznacza że selektorem jest element, wewnątrz którego jest zagnieżdżony.

Inny przykład działania selektorów:

p {
 font-size: 14px;
 line-height: 16px;
 &>a {
   color: red;
 }
}

Jeśli tak skonstruujemy regułę, to kolor czerwony przyjmą tylko odnośniki będące dziećmi elementu p.

Pisząc zagnieżdżone reguły musimy pamiętać by unikać zbyt głębokiego zagnieżdżania (zazwyczaj powyżej 3 poziomów).

Przykład:

SASS:

body {
  .wrapper{
    h1 {
      p {
        a {
          color: #f00;
          &:hover {
            color: #ccc;
          }
        }
      }
    }
  }
}

Wynikowy CSS:

body .wrapper h1 p a {
  color: #f00; 
}
body .wrapper h1 p a:hover {
  color: #ccc; 
}

Widzimy, że generowany jest całkowicie zbędny kod. W takiej sytuacji warto opuścić kilka początkowych selektorów i napisać to w ten sposób:

h1 {
  p {
    a {
      color: #f00;
      &:hover {
        color: #ccc;
      }
    }
  }
}

Tak działa zagnieżdżanie. Oczywiście w tym konkretnym przykładzie nie miałoby ono większego sensu ponieważ nie mamy zbyt dużo elementów ale podczas stylowania całej witryny od razu zauważysz że kod pisze się o wiele szybciej i co najważniejsze jest on bardziej przejrzysty i łatwiejszy w modyfikacji gdy siądziesz do niego po jakimś czasie.

Zmienne

Zmienne służą do przechowywania różnych wartości np. liczb, kolorów, ciągów itd. Warto je stosować wtedy gdy korzystamy z ich wartości w wielu miejscach na stronie. Zmienną definiujemy w ten sposób:

$link-color: #bdce80;
$link-hover-color: #e3985e;

Rozpoczynamy od $ i nazywamy zmienną (warto zadbać by nazwa zmiennej opisywała jej zawartość). Następnie po : podajemy wartość zmiennej. W naszym przykładzie jest to kod szesnastkowy koloru. Pod zdefiniowaniu zmiennych w zmienne.scss możemy jej użyć w style.scss:

a {
  color: $link-color;
  &:hover {
     color: $link-hover-color;
  }
}

Jak widzisz aby użyć zmiennej wpisujemy po prostu jej nazwę jako wartość właściwości (color w tym przykładzie). Jeśli używalibyśmy tej zmiennej w kilkunastu innych miejscach to wystarczyłoby zmienić tylko wartość zmiennej w pliku zmienne.scss. Jest to olbrzymia oczędność czasu.

Kolejny przykład użycia zmiennych:

$font-family-primary: Arial, Helvetica, sans-serif;
$font-family-secondary: Georgia, serif;

W tym przykładzie przypisujemy do zmiennych dwie czcionki. Jedną główną, którą będziemy używali w większości miejsc na stronie i drugą, która użyta będzie tylko w kilku miejscach. Jeśli chcielibyśmy w jakimkolwiek momencie zmienić którąś z czcionek to wystarczy zrobić to tylko w tym jednym miejscu.

Użycie:

body {
  font-family: $font-family-primary;
}

p {
  font-family: $font-family-secondary;
}

Bardzo dobrym pomysłem jest przechowywanie w zmiennych rozmiarów czcionek.

Przykład:

$p-font-size: 15px;

Takiej zmiennej będziemy używali w miejscach, w których rozmiar czcionki zawsze będzie taki sam.

Ostatnim przykładem jaki przedstawie jest przechowanie reguł media queries wewnątrz zmiennych:

$phone: "only screen and (max-width: 480px)";
$tablet: "only screen and (max-width: 768px)";
$desktop: "only screen and (max-width: 960px)";

W tym przypadku do zmiennych przypisujemy konkretne reguły media queries.

Przykład użycia:

.wrapper {
  @media #{$desktop} {
    background: blue;
  }
  @media #{$tablet} {
    background: green;
  }
  @media #{$phone} {
    background: red;
  }
}

Div .wrapper będzie teraz zmieniał tło w zależności od rozdzielczości.

Zastosowanie zmiennych jest bardzo szerokie i nie sposób go tutaj w całości opisać. Główną zaletą zmiennych jest łatwość utrzymania i modyfikacji kodu w przyszłości. Warto o tym pomyśleć by później zamiast zmieniać dziesiątki reguł, zmienić tylko jedną 🙂

Domieszki

Domieszki (mixiny) w odróżnieniu od zmiennych definiują nie tylko wartości ale również właściwości. Mixin powinniśmy używać gdy dany zestaw reguł występuje w wielu miejscach w stylach. Domieszki definiujemy w następujący sposób (plik domieszki.scss):

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

Zaczynamy od słowa @mixin a następnie podajemy nazwę domieszki (u nas size). Następnie wstawiamy parę nawiasów. Pomiędzy nawiasami wstawiamy parametry domieszki. Pomiędzy nawiasami { } wstawiamy nasze reguły. Wartości parametrów zostaną podstawione do wartości właściwości.

Przykład zastosowania:

.wrapper {
  @include size(200px, 500px);
  background: #ccc;
}

Div .wrapper będzie miał teraz 200px szerkości i 500px wysokości. Wartości parametrów zostaną podstawione do reguł.

Mixiny nie muszą przyjmować parametrów. Przykład:

@mixin basic-transition() {
  transition: all 0.2s ease-in-out;
}

Jeśli w wielu miejsach na stronie używamy takiego krótkiego przejścia to możemy zdefiniować sobie taką domieszkę i używać jej w następujący sposób:

a {
 color: $link-color;
 @include basic-transition(); 
 &:hover {
    color: $link-hover-color;
 }
}

Bardziej praktycznym przykładem jest domieszka, której możemy użyć przy stylowaniu buttona:

@mixin button($width, $height, $background, $color, $border-radius) {
  width: $width;
  height: $height;
  line-height: $height;
  text-align: center;
  background: $background;
  color: $color;
  border-radius: $border-radius;
}

Użyjemy jej w ten sposób:

button {
  @include button(150px, 50px, #000, #fff, 8px); 
}

Oczywiście jeśli na naszej stronie znajdowałby się tylko jeden przycisk to tworzenie tej mixiny nie miałoby sensu. Ale już przy każdym kolejnym jest to duża oszczędność czasu.

W tej części to już wszystko. Masz już wystarczającą wiedzę żeby korzystać z SASS. W kolejnych częściach poznamy funkcje, pętle i inne znacznie przyśpieszające pracę funkcjonalności tego preprocesora.

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

2 użyteczne sposoby na strukturyzowanie plików SASS Kurs SASS dla początkujących cz.3 Funkcje Prosta responsywność – 11 systemów grid CSS
View Comments
  • A jak mam zagnieździć w pliku scss klasę, która wstępuje w dokumencie html kilka razy? np.

    Jeśli zapiszę jak poniżej:
    section {
    .container {
    }
    }
    nav {
    .container {
    }
    }

    to usiałabym dwukrotnie wpisywać stylowanie containera (a w containerze oczywiście jest jeszcze mnóstwo innych elementów, których to stylowanie ma dotyczyć), co nie jest zbyt rozsądne. Natomiast poniższy zapis:

    .container {
    section {
    }
    nav {
    }
    }
    nie jest poprawy, bo container jest w section a nie odwrotnie.
    To jak poprawnie zagnieździć?

  • Taka luźna uwaga – nazywać pliki bo angielsku 😉

  • Jeżeli ktoś pracuje na Macu – mega polecam https://codekitapp.com/ To nie tylko kompilator. To mega kombajn, dzięki któremu możesz zainstalować kompletną bazę frameworków, pomoże w debuggowaniu kodu, a nawet zoptymalizuje Ci w tle obrazki jakich używasz przy projekcie. Idealnie współgra z Sublime i Atom. Jednym słowem must have 🙂

  • Super poradnik 🙂