HTML и CSS. Связка SASS и PHPSTORM

Настройка SASS в PhpStorm

Алгоритм

  1. Скачиваем ruby с сайта http://rubyinstaller.org/ Выбрал версию 1.9.3 в соответствии с рекомендацией на этом сайте, хотя доступна версия и 2.1.5.
  2. Запускаем скаченный exe и устанавливаем ruby (в процессе установки выбрал "Add Ruby executables to your PATH").
  3. После установки идем в Пуск, ищем Ruby 1.9.3 (или что-то похожее) и выбираем подпункт "Start Command Prompt with Ruby". В появившейся командной строке пишем gem install sass и ждем пару минут (в худшем случае), пока установится sass и документация. Для проверки введите sass -v . Должна появиться информация об установленной версии sass. Например, Sass 3.4.11 (Selective Steve).
  4. Далее создаем проект в phpStorm и в папке, например, styles создаем файл styles.scss. После этого phpStorm автоматические запустит FileWatcher и предложит добавить расширение scss (если нет, то идем в File - Settings - FileWatchers).
    sass phpstorm
    Соглашаемся (в окне настроек все данные будут определены автоматически: program C:\Ruby193\bin\scss.bat и др.). После этого добавим в файл scss тестовый код: 

    В результате рядом с файлом scss должен появиться обычный файл css с кодом: