Препроцессор SASS. Установка и настройка в Sublime Text

Препроцессор SASS. Установка и настройка SASS в Sublime Text

Препроцессоры ускоряют работу верстальщика. Если с работой с препроцессором LESS все просто, установил плагин и он работает. То чтобы компилировать SASS нужно взять бубен и немного потанцевать с ним. Разберемся как настроить компиляцию SASS файлов в Sublime Text.

 

Как компилировать SASS файлы в Sublime Text.

Для начала необходимо установить Ruby. Переходим по ссылке, выбираем рекомендуемую версию Ruby для установки и скачиваем. На момент написания статьи это была версия Ruby 2.1.7 (x64). Соответственно выберите подходящую для вас разрядность.

В время установки необходимо установить флажок на пункте «Add Ruby executables to your PATH»

Настройка SASS build в Sublime Text. Ставим Ruby

Настройка SASS build в Sublime Text. Ставим Ruby

После установки запускаем командную строку, сделать это можно сочетанием клавиш Win + R и набрав «cmd». В командной строке пишем «gem install sass». Когда SASS установится, в командной строке будет соответствующее уведомление:

Настройка SASS в Sublime Text. Ставим Ruby и SASS.

Настройка SASS в Sublime Text. Ставим Ruby и SASS.

Теперь можно компилировать SASS в командной строке. Но намного удобнее делать это сразу в Sublime Text.

 

SASS файлы в Sublime Text

В Sublime Text устанавливаем Package Control, если он еще не установлен. Как это сделать я рассказывал в статье Установка плагинов на Sublime Text 2.

И устанавливаем в Sublime плагин SASS Build. Перезапускаем Sublime. Теперь вы можете компилировать файлы SASS в CSS внутри Sublime Text. Если файл не компилируется — необходимо при открытом файле зайти в меню Tools → Build System и выбрать пункт SASS. То есть указать Sublime какую билд систему использовать для компилирования.

Также рекомендую установить плагин SublimeOnSaveBuild — чтобы билд файла происходил не по клику Ctrl + ‘, а автоматически при сохранении файла (Ctrl + S).

Для подсветки кода SASS/SCSS необходимо установить плагины SASS и SCSS, и Syntax highlighting for SASS.

 

Замечание. В пути компилируемого файла не должно быть русских символов. Иначе компиляция не произойдет.

Если файл не компилируется, и в консоли выводятся похожие ошибки:

Traceback (most recent call last):
  File ".sublime_plugin.py", line 337, in run_
  File ".exec.py", line 154, in run
  File ".exec.py", line 45, in __init__
UnicodeDecodeError: 'ascii' codec can't decode byte 0xcf in position 6: ordinal not in range(128)

Есть решение которое должно помочь. Идем в меню Preferences → Browse Packages, открываем файл /Default/exec.py и делаем замену строки

proc_env[k] = os.path.expandvars(v).encode(sys.getfilesystemencoding()) на proc_env[k] = os.path.expandvars(v.decode(sys.getfilesystemencoding())).encode(sys.getfilesystemencoding())

Должно помочь.

Данная статья написана по этой инструкции.

  • Nick YBig

    не могу найти конфиг сохранения .css файла. По умолчанию сохраняется в корень папки где лежит sass файл. Как поменять не могу найти.

    • К сожалению не могу подсказать на этот счет. Сейчас пришел к тому что для компиляции использую gulp и node.js Там можно подробно указать откуда брать исходный scss или less файл и куда его компилировать. Правда плата в том что необходимо оформлять все в виде проекта.