Sass (Syntatically Awesome Style Sheets) е компютърен език, който е разширение на CSS. Sass фаловете се компилират/интерпретират до стандартен CSS с помощта на специални програми.
Защо да използваме Sass?
Използването на Sass позволява:
- ефективно разделяне на проектите на отделни модули с цел по-добро управление и многократната им употреба в различни проекти;
- параметризиране (използване на променливи) на css кода, което прави управлението му изключително ефективно и лесно за промяна и в същото време го поддържа в консистентен вид.
Процес на работа с използване на Sass
Sass файловете не може да се използват директно, а трябва да бъдат преработени до стандартен CSS. Това става с помощта на програми, които биват два вида - интерпретатори и компилатори. В практиката, от съображения за скорост на изпълнение най-често се използват компилатори т.е. Sass файловете еднократно се преобразуват (компилират) до един или повече CSS файлове. Записаните CSS файлове се използват в реалната среда. Когато е необходимо да се извърши промяна, тя се извършва в Sass файловете, те се компилират и се използват новите CSS файлове.
Примерен scss
@use 'reset';
$grid-gutter: 30px;
$bg-color: #fff;
$text-color: #333;
body {
background-color: $bg-color;
color: $text-color;
}
.box {
min-width: 80%;
margin: 0px $grid-gutter/2;
}
Компилиран до css
/* копие на съдържанието на файла _reset.scss*/
body {
background-color: #fff;
color: #333;
}
.box {
min-width: 80%;
margin: 0px 15px;
}
Какво е необходимо за работа със Sass?
Необходимо е да разполагате с:
- текстов редактор, желателно с поддръжка (синтактично оцветяване) на Sass - напр. Atom;
- минимум познания по английски език, за да можете да ползвате документацията на Sass;
- компилатор за Sass.
Инсталиране на компилатор за Sass
В случай, че средата ви за разработване е Linux и не се притеснявате да напишете някой и друг ред от командна линия, можете да използвате самостоятелната инсталация на dart sass.
В случай, че използвате Windows и искате да използвате Sass с минимум зависимост от други софтуерни компоненти, можете да използвате Scout-App. След като свалите zip файла, разархивирайте го в удобна за вас директория. Можете да си направите shortcut от десктопа към exe файла на Scout-App. След това е необходимо да добавите в Scout-App вашия проект. Когато Scout-App е стартиран и вашият проект в него също е стартиран, Scout-App следи за промени в scss директорията на вашия проект и когато забележи такива компилира и записва резултата в съответната css директория.
