Настраиваем локально 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 в PhpStorm

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

  1. $base_color: #7299bf;
  2. body {
  3. color: $base_color;
  4. }

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

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

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

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

Комментарии

Аватар пользователя Spleshka
Spleshka

Чуть дополню статью ссылкой на мануал http://www.jetbrains.com/phpstorm/webhelp/transpiling-sass-less-and-scss-to-css.html

Аватар пользователя Иван
Иван

Спасибо! Очень помогло!

Аватар пользователя Vlad
Vlad

Thanx!

Аватар пользователя Alex
Alex

Как сделать что бы scss в одной папке а css в другой
когда
theme/scss
theme/css

Аватар пользователя Евгений Куликов
Евгений Куликов

Как сделать что бы scss в одной папке а css в другой
когда
theme/scss
theme/css

Можно вот таким образом
--no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css

Аватар пользователя angarsky
angarsky
Если вдруг при установке гемов консоль начнет ругаться на отсутствие сертификата, то решение - вот
Аватар пользователя Сергей
Сергей

Добрый день!
Сделал все как описано в статье исходники sass boostrap не хотят компилироваться ни в какую.
Создал проект через компас в нем все работает нормально.
В чем может быть проблема подскажите.

Аватар пользователя vacoo
vacoo

Не устанавливайте ruby в programm files. Он не воспринимает пробелы

Аватар пользователя Руслан
Руслан

Кстати, на заметку, лучше если проект будет лехать в папках цепочка которых состоит из английский слов UTF-8, кириллица - зло в этом деле.

Аватар пользователя Николай
Николай

Подскажите пожалуйста, почему компиляция происходит не всегда. Например задаю селектору свойство цвета body
color: #ccc
Компилятор в css файл выводит так body { color: cc;) То есть не подхватывают последнюю написанную букву.

Добавить комментарий

                                      


888d888 888 888 888d888 88888b.
888P" 888 888 888P" 888 "88b
888 Y88 88P 888 888 888
888 Y8bd8P 888 888 888
888 Y88P 888 888 888


Зарегистрируйтесь для добавления материалов без проверки.