Как установить Sass (SCSS) на Mac и скомпилировать в CSS

Как установить Sass (SCSS) на Mac и скомпилировать в CSS

Прежде всего уточним что такое Sass. Абревиатура SASS расшифровывается как Syntactically Awesome Style Sheets дословно переводится как синтетически потрясающие таблицы стилей. Установка sass или scss довольно проста - давайте разберем ее по шагам.

Как установить Sass (SCSS) на Mac

Для того чтобы установить Sass (он же будет обрабатывать и все scss файлы) на Mac, сначала установим джем для sass.

  1. Вводим в терминал команду:

    sudo gem install sass
    
  2. Затем вводим sudo пароль и смотрим как ставится джем.

Как установить Sass (SCSS) в Sublime Text

Для того, чтобы синтаксис Sass и scss правильно распознавался у вас в Sublime Text, нужно установить пакет Sass:

  1. Заходим в Sublime Text и идем в Tools - Command Palette.
  2. В появившуюся строку вводим Package Control и в выпадающем меню выбираем Package Control: Install Package.
  3. В появившейся строке вводим Sass и выбираем его.
  4. Немного ждем пока установится пакет и вуаля - теперь в правом нижнем углу, помимо всех остальных форматов, мы можем выбирать Sass. Но это еще не все.
  5. Чтобы и в дальнейшем у вас все scss файлы сразу открывались с форматированием и синтаксисом sass - открываем новый scss файл, идем в View - Syntax - Open all with current extension as ... - Sass.

Как перекомпилириовать Sass (SCSS) в CSS. Преобразование SCSS в CSS

Как препроцессить Sass (scss) в CSS в терминале:

  1. Для того, чтобы препроцесить (скомпилировать) наш .scss файл в обычный .css запустим в терминале команду:

    sass input.scss:output.css
    
  2. Чтобы не повторять ее постоянно, а включить автоматический препрцессинг (преобразование) как только что-то меняется в .scss файле применим следующую команду:

    sass --watch input.scss:output.css