Wstęp do SASS – Instalacja i podstawowe komendy

SASS jest  pre procesorem języka kaskadowych styli CSS (preprocesorem) umożliwiającym wydajniejszą pracę. Oczywiście nie jest to jedyny tego typu skrypt istnieje wiele innych choć by bardzo przypominający go LESS.

Jak zainstalować SASS na komputerze

Oba są obecnie w Polsce dość popularne, myślę że obecnie oba mają zbliżoną liczbę użytkowników. Tak się jednak złożyło, że pracuję obecnie w SASS więc to jemu poświecę ten wpis.

SASS występuje w dwóch wersjach, różniących się między sobą jedynie sposobem zapisu:

• SASS – bez klamer i średników na końcu linii
• SCSS – bardziej przypominający CSS, z klamrami i średnikami (osobiście wolę tę wersję)

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Dla użytkowników CSS przejście na SCSS jest zdecydowanie bardziej proste. Poza tym wydaje mi się, że wszystko jest w nim bardziej czytelne. Od razu wiadomo gdzie jest początek a gdzie koniec. Przy większych projektach łatwiej będzie się w nim zorientować – a i praca w edytorze jest dużo łatwiejsza.

Instalacja na komputerze

Proces instalacji SASS zaczynamy od pobrania na nasz komputer Rubby. Na szczęście dla niektórych użytkowników nie trzeba uczyć się tego języka programowania nie jest to wymagane. Podobno jednak ułatwia konfigurację niektórych ustawień.

W trakcie procesu instalacji trzeba zaznaczyć opcję „Add Rubby excutables to your PATH”,  dzięki czemu będziemy posiadali łatwy dostęp do linii komend.

Teraz otwieramy „Wiersz Poleceń”. W systemie Windows 7 znajduje się on w akcesoriach. Można go również wyszukać wpisując odpowiednią frazę w wyszukiwarkę programów:

cmd

Następnie w pisujemy w otwartym oknie kod i przyciskamy enter:

gem install sass

Proces ten wygląda inaczej dla użytkowników np. Linux.

Instalacja z pomocą edytora

Niektóre edytory kodu posiadają generator SASS jako dodatkowe rozszerzenie (np. Visual Studio Code).  W wielu przypadkach wystarczy dodać je do edytora i nie trzeba instalować go ręcznie.

W Visual Studio Code wyszukujemy rozszerzenie (Extensions) Easy Sass.

Źródło:

• http://sass-lang.com/guide
• https://aurainweb.pl/webroad.pl/html5-css3/657-1-sass-compass-instalacja-i-podstawowe-komendy/
• http://grafmag.pl/artykuly/wstep-do-sass-prepreocesora-jezyka-css/