Настройка Phpstorm для компиляции SCSS в CSS

В редакторе Phpstorm можно настроить автоматическую компиляцию SCSS в CSS.

Настройка scss компилятора

1. Скачиваем Руби (выбираем последний рализ из категории without Devkit) и устанавливаем его.

2. Запускаем консоль, через "Пуск" - start command prompt with ruby

   
   

3. В консоли выполняем:

    
   gem install sass
   

Настройка PhpStorm

1. Создаем проект, в нем файл с расширением scss

2. Открываем настройки: File - Settings (ctrl + alt + s) - Tools - File Watchers

   Там нажимаем на "+" (добавить)

   
   

3. Есть несколько вариантов настройки, я выбрал Compass SCSS

   
   

4. В открывшимся окне, нужно указать путь до компилятора scss. Например, с:\Path_TO_Ruby\bin\scss.bat

   
   

5. Также стоит указать несколько настроек, отключающих кэш и создание карты:

   
   

    
   --no-cache
   --update
   --sourcemap=none
   $FileName$:$FileNameWithoutExtension$.css
   

6. Последнее, что останется сделать, это включить компиляцию:

   
   

На этом настройки закончены, после сохранения изменений в scss файле, в той же директории будет создан файл идентичным именем и расширением css, в котором уже бкдет скомпилированный результат.