Настраиваем локально 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 3.2.12 (Media Mark), означающий, что все установилось, как требуется;sass -v
- Запускаем 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.
Комментарии
Чуть дополню статью ссылкой на мануал http://www.jetbrains.com/phpstorm/webhelp/transpiling-sass-less-and-scss-to-css.html
Спасибо! Очень помогло!
Thanx!
Как сделать что бы scss в одной папке а css в другой
когда
theme/scss
theme/css
Можно вот таким образом
--no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css
Добрый день!
Сделал все как описано в статье исходники sass boostrap не хотят компилироваться ни в какую.
Создал проект через компас в нем все работает нормально.
В чем может быть проблема подскажите.
Не устанавливайте ruby в programm files. Он не воспринимает пробелы
Кстати, на заметку, лучше если проект будет лехать в папках цепочка которых состоит из английский слов UTF-8, кириллица - зло в этом деле.
Подскажите пожалуйста, почему компиляция происходит не всегда. Например задаю селектору свойство цвета body
color: #ccc
Компилятор в css файл выводит так body { color: cc;) То есть не подхватывают последнюю написанную букву.
Добавить комментарий