Как подружить Sublime Text 2 и SASS на Windows

Tue, 29 Apr 2014 18:58:52 +0400

Если ты не знаешь что такое SASS, можешь почитать тут. Вкратце: очень крутая штука.

Для начала, для того, чтобы получить возможность компилировать sass/scss файлы необходимо установить Ruby. Во время установки обязательно проследи чтобы стояла галочка, добавляющая Ruby в Path.

После установки запусти командную строку (cmd). Это можно сделать нажав Win + R и набрав cmd. В командной строке набери «gem install sass». Должно появится что-то вроде этого:

SASS установлен. Теперь ты можешь компилировать sass/scss файлы, используя командную строку:

Но гораздо удобней делать это через текстовый редактор, например Sublime Text

Для начала в Sublime должен быть установлен Package Control. Если он у тебя ещё не установлен, нажми ctrl+ё, вставь в открывшуюся консоль следующие строки:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

После установки перезапусти Sublime.

Теперь Package Control доступен из вкладки Preferences.

Нажми на него или используй хоткей ctrl+shift+P и набери Install Package, затем SASS Build и установи плагин.

Перезапусти Sublime.

Всё, теперь ты можешь компилировать sass/scss файлы нажав ctrl+B.

Скомпилированный файл появится рядом, с таким же именем и расширением css.

Важно! В пути до компилируемого файла не должно быть русских символов. Да, в 21-м веке это звучит странно, но у Sublime возникают с этим проблемы. Если ты знаешь как это победить, поделись в комментариях.

Если файл не компилируется, а в консоли выводится что-то вроде этого:

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())

Это должно помочь.

Чтобы сэкономить время, можешь установить плагин SublimeOnSaveBuild, и тогда компиляция будет происходить сразу после сохранения (по нажатию ctrl+S).

Для подсветки синтаксиса sass/scss файлов установи плагины в Sublime, которые так и называются SASS и SCSS, или другие, в названии которых содержится highlight.

Если тебе когда-нибудь понадобится обновить SASS, просто набери в командной строке «gem update sass».

Техноблог, заметки с тегом: sublime text

Как подружить Sublime Text 2 и SASS на Windows