Wstęp do SASS – Instalacja i podstawowe komendy

kursy tutoriale

Kategoria wpisu Kurs CSS, Kursy Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

SASS jest rozszerzeniem 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. 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ę)

Przykładowy skrypt w wersji SASS:

Ten sam skrypt w wersji SCSS:

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.
rubby

W kolejnym kroku 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:

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

rubby2

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.

Visual Studio Code

Visual Studio Code

 

Tworzenie przykładowego pliku w SASS

 

Źródło:
http://sass-lang.com/guide
http:/webroad.pl/html5-css3/657-1-sass-compass-instalacja-i-podstawowe-komendy/
http://grafmag.pl/artykuly/wstep-do-sass-prepreocesora-jezyka-css/

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *