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ę)
Przykładowy skrypt w wersji SASS:
nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none
Ten sam skrypt w wersji SCSS:
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.
https://www.aurainweb.pl/2016/09/tworzenie-przykladowego-pliku-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/
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.