Настраиваем локально SASS в связке с PhpStorm

Если вы разработчик со стажем, то наверняка слышали про SASS технологию. SASS – это язык проектирования CSS файла, упрощающий процесс написания CSS кода и предоставляющий расширенный инструментарий в виде переменных, логических операций и т.п. Сейчас я расскажу, как это дело настроить на локальной машине.

Ничего сложного в установке, казалось бы, и нет, но меня угораздило потратить порядка полутора часов, чтобы настроить связку SASS и PhpStorm. Дабы не наступать на эти грабли дважды – законспектирую. Еще скажу, что мне больше по вкусу пришелся язык разметки SCSS, нежели SASS – разница в обертывании данных фигурными скобками.

Установка и обновление программ для SASS

• Для начала потребуется 7 ветка PhpStorm;
• Далее скачиваем инсталлер Ruby под Windows www.rubyinstaller.org
• После установки Ruby в пусковом окошке Windows ищем консоль “Start Command Promt with Ruby”;
• Прописываем команду для установки SASS gem install sass;
• Далее прописываем sass -v, после чего должны увидеть ответ Sass 3.2.12 (Media Mark), означающий, что все установилось, как требуется;
• Запускаем PhpStorm. В папке с нашей Drupal темой создаем файл .scss расширения;
• PhpStorm сразу предложит нам настроить File Watcher для этого типа файлов. Если не предложил, то самостоятельно лезем в настройки – File – Settings – File Watchers.
• Добавляем SCSS Watcher, указываем путь к батнику scss.bat.

Теперь открываем ваш .scss файл и добавляем туда тестовый код. Например, такой:

$base_color: #7299bf;
body {
  color: $base_color;
}

Если все настроено верно, то будет создан .css файл в той же директории, с тем же именем, что и .scss файл. Открываем файл и видим чистой воды CSS код. Не получилось? PhpStorm ругается, что не может найти ‘ruby.exe’?

Не расстраиваемся, у меня тоже не сразу завелось. Все дело в переменной $PATH вашего окружения. Поэтому опять открываем настройки и добавляем в Environment Variables переменную PATH, указывающую на папку с Ruby.

После этих нехитрых правок все должно заработать. Теперь вы можете писать более практичный с точки зрения разработчика SCSS код, который будет на лету компилироваться в CSS благодаря настройкам PhpStorm. Успехов в освоении SASS!

Документация по SASS: www.sass-lang.com.