Прежде всего уточним что такое Sass. Абревиатура SASS расшифровывается как Syntactically Awesome Style Sheets дословно переводится как синтетически потрясающие таблицы стилей. Установка sass или scss довольно проста - давайте разберем ее по шагам.
Как установить Sass (SCSS) на Mac
Для того чтобы установить Sass (он же будет обрабатывать и все scss файлы) на Mac, сначала установим джем для sass.
-
Вводим в терминал команду:
sudo gem install sass
-
Затем вводим sudo пароль и смотрим как ставится джем.
Как установить Sass (SCSS) в Sublime Text
Для того, чтобы синтаксис Sass и scss правильно распознавался у вас в Sublime Text, нужно установить пакет Sass:
- Заходим в Sublime Text и идем в Tools - Command Palette.
- В появившуюся строку вводим Package Control и в выпадающем меню выбираем Package Control: Install Package.
- В появившейся строке вводим Sass и выбираем его.
- Немного ждем пока установится пакет и вуаля - теперь в правом нижнем углу, помимо всех остальных форматов, мы можем выбирать Sass. Но это еще не все.
- Чтобы и в дальнейшем у вас все scss файлы сразу открывались с форматированием и синтаксисом sass - открываем новый scss файл, идем в View - Syntax - Open all with current extension as ... - Sass.
Как перекомпилириовать Sass (SCSS) в CSS. Преобразование SCSS в CSS
Как препроцессить Sass (scss) в CSS в терминале:
-
Для того, чтобы препроцесить (скомпилировать) наш
.scss
файл в обычный.css
запустим в терминале команду:sass input.scss:output.css
-
Чтобы не повторять ее постоянно, а включить автоматический препрцессинг (преобразование) как только что-то меняется в
.scss
файле применим следующую команду:sass --watch input.scss:output.css