Използване на SASS

Нека да изпишем нещо и за препроцесорите.

Прескачам темата SASS VS LESS VS Other, тъй като това е въпрос на предпочитания, като цяло няма разлика измежду тях (но все пак аз съм ползвал единствено Sass и Less де, така че е само предположение че са идентични).

Но за кратко, избрах Sass заради удобната работа със Command Prompt-а (CMD) на Уиндоус, тъй като и без това я използвам доста често. Другото предимство (което специално аз не намерих за Less, може и да има) е опцията –watch, чрез която няма да се притеснявате дали сте конвертирали файла … Sass има грижата за това.

Та това е общо взето.

За да го използвате, ще трябва да инсталираме Ruby, който може да свалите от официалният им сайт. Инсталацията е твърде проста, за да навлизаме в подробности. Само сложете отметката, инсталатора да добави пътя до /bin/ в PATH променливата на уиндоуса, за да не си играете после да го правите ръчно.

Ако сте го инсталирали вече – страхотно. Сега остава просто да напишете в конзолата (CMD)

gem install sass

Готово, вече може да използвате Sass.

Като за начало, направете си един файл, с разширение **.scss. **В него може да пишете Вашият CSS, като дойде време за конвертиране, просто напишете

sass style.scss style.css

Както разбирате, по-горният код ще ни конвертира създаденият от нас файл във style.css.

А сега и гъзарийката, ако напишете

sass style.scss style.css –watch

Sass автоматично ще се погрижи Вашият файл автоматично да се конвертира, щом засече промяна в него (яко, а).

Разбира се, вместо да следите един или няколко файла, може да следите за промени в цяла директория. Просто вместо файла, напишете директорията.

Друго, смятам също полезно нещо е компресирането на изходният файл. Sass поддържа четери типа: nested, expanded, compact и compresed.

nested – всяко свойство си е на отделен ред, като всяко е по-навътре според това колко други свойства е наследило.

expanded – тук всяко свойство си е на отделен ред.

compact – тук вече всяко правило си е на един ред

и разбира се, за да пестите максимално място compressed ще Ви конвертира файла в един, единствен ред.

И сега разбира се, как да го използвате

sass style.scss style.css –watch –style compressed

Може би и другата полезна опцийка е, да зададете къде (и въобще дали) Sass да пази кеша на стиловете Ви. Това става с командата

sass style.css style.css –watch –style compresed –cache-location directory/cache