Настройка SASS в PhpStorm с поддержкой Compass

Настройка SASS в PhpStorm (LESS / SCSS) выполняется в несколько простых действий. Однако, есть небольшая проблема с подключением Compass Framework, при работе под управленим ОС Microsoft Windows.

В статье описываю способ установки поддержки LESS / SCSS для PhpStorm и способ решения проблемы с импортом ресурсов Compass Framework и сообщением об ошибке: File to import not found or unreadable: compass/reset.

Приведённый способ предполагает установку на платформе Microsoft Windows, однако может быть легко адаптирован для OS X.

Требования к среде разработки PhpStorm

Пример настройки SASS в PhpStorm приведён на последней версии среды к моменту написания статьи и записи видео-урока: PhpStorm 2016.1.2 Build #PS-145.1616 от 14 мая 2016 года.

PhpStorm 2016.1.2 Build #PS-145.1616 от 14 мая 2016 года

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

Компиляция SASS / SCSS файлов в PhpStorm выполняется средствами встроенных инструментов File Watchers, которые вызывают необходимые скрипты Ruby.

Иными словами, компиляция выполняется средствами Ruby.

Установка Ruby с поддержкой SASS

Пакет установки Ruby для Windows можно скачать с сайта http://rubyinstaller.org/ из раздела Downloads:

Ruby для Windows можно скачать с сайта http://rubyinstaller.org/

На втором шаге инсталлятора желательно отметить флаги:

  • Add Ruby executables to your PATH – включает каталог с исполняемыми файлами Ruby в переменную окружения PATH операционной системы, что позволит запускать скрипты Ruby из любого каталога без указания к нему полного пути.
  • Associate .rb and .rbw files with this Ruby installation – устанавливает компилятор Ruby программой по-умолчанию для открытия файлов с расширением .rb и .rbw.

Как будет выглядеть окно после установки необходимых параметров показано на изображении ниже.

Установка Ruby

Установка расширения SASS для Ruby

После завершения работы инсталлятора, необходимо открыть консоль с поддержкой Ruby. Она появится в списке установленных программ:

Консоль с поддержкой Ruby

В консоли пишем команду:

gem install sass

После чего будет установлено расширение SASS для Ruby:

Установка расширения SASS для Ruby

Настройка File Watcher для обработки SCSS файлов в PhpStorm

В дереве проекта PhpStorm создайте новый файл с расширением SCSS, например: style.scss.

Если ранее в PhpStorm не создавался File Watcher для SCSS файлов, среда разработки предложит его настроить:

File Watcher для SCSS файлов в PhpStorm

Посмотреть весь список созданных File Watchers можно в параметрах среды разработки:
File – Settings (Ctrl+Alt+S) – Tools – File Watchers

Нажмите ссылку Add Watcher.

В поле Program выберите файл скрипта из каталога установки Ruby по аналогии с вариантом, изображённым на картинке:

C:\Ruby23-x64\bin\scss.bat

Add Watcher SCSS в PhpStorm

После этой настройки PhpStorm начнёт автоматически компилировать файлы SCSS в CSS в текущем каталоге.

Настройка File Watcher для обработки SASS файлов в PhpStorm

Настройка File Watcher для обработки SASS файлов в PhpStorm выполняется аналогично описанному способу для SCSS файлов, который приведён выше с той лишь разницей, что создаются файлы стилей в расширением “.sass”, а в File Watcher устанавливается подходящий скрипт для обработки SASS файлов.

В дереве проекта PhpStorm создайте новый файл с расширением SCSS, например: test.sass.

Если ранее в PhpStorm не создавался File Watcher для SASS файлов, среда разработки предложит его настроить:

File Watcher для SASS файлов в PhpStorm

Нажмите ссылку Add Watcher.

В поле Program выберите файл скрипта из каталога установки Ruby по аналогии с вариантом, изображённым на картинке:

C:\Ruby23-x64\bin\sass.bat

Add Watcher SASS в PhpStorm

После этой настройки PhpStorm начнёт автоматически компилировать файлы SASS в CSS в текущем каталоге.

Установка расширения Compass для Ruby

В консоли Ruby пишем команду:

gem install compass

Установка расширения Compass для Ruby

После чего будет установлено расширение Compass.

Подключение поддержки Compass в PhpStorm

Включить поддержку Compass Framework можно в параметрах среды PhpStorm.

File – Settings (Ctrl+Alt+S) – Languages & Frameworks – Compass

Установите флаг “Enable Compass support” и укажите скрипт из каталога установки Ruby:

C:\Ruby23-x64\bin\compass.bat

Заполненная страница параметров Compass будет выглядеть аналогично изображению ниже.

Подключение поддержки Compass в PhpStorm

По логике, после завершения этих настроек все должно заработать. Однако под управлением ОС Microsoft Windows попытка импорта любого ресурса приведёт к ошибке:

cmd.exe /D /C call C:/Ruby23-x64/bin/scss.bat --no-cache --update styles.scss:styles.css
error styles.scss (Line 1: File to import not found or unreadable: compass/reset.)
Process finished with exit code 1

 

Ошибка File to import not found or unreadable: compass/reset

Как решить проблему с ошибкой: File to import not found or unreadable: compass/reset

Судя по описаниям, многие решают эту проблему за счёт просто копирования файлов Compass Framework из каталога lib Ruby в каталог проекта.

Во-первых, такой способ откровенно кривой.

Во-вторых, он не решит проблему в проектах, где файлы стилей раскиданы по разным каталогам, например, как в проектах разработки сайтов на 1С-Битрикс.

В-третьих, способ решения можно найти в документации к SASS / SCSS компилятору. Именно этот способ привожу ниже.

Открываем File Watcher для SCSS и в поле Arguments дописываем несколько ключей:

--style compressed --compass

Как решить проблему с ошибкой: File to import not found or unreadable: compass/reset

Первый ключ, заставляет собирать файл CSS в сжатом виде – одна длинная строка. Можно его не использовать, если нужно получить конечный файл стиля в несжатом читабельном виде.

Второй – использовать при компиляции Compass Framework.

Аналогично заполняем параметры File Watcher для SASS. Ключи для SCSS и SASS одинаковые.

Заключение

Вышеприведённый способ позволяет отказаться от внешних компиляторов LESS / SCSS и выполнять все задачи средствами единой среды разработки.

Ранее пользовался компиляторами Scout и Koala, но после увеличения объёма работы, связанной с созданием сайтов на 1С-Битрикс, эти компиляторы перестали удовлетворять всем потребностям.

Дело в том, что Scout работает с файлами, разбитыми по определённым каталогам, а при сборке темы оформления и при создании модулей на 1С-Битрикс, файлы стилей могут быть раскиданы по разным каталогам.

Безусловно, можно навести с этими файлами порядок, но, во-первых, эта работа требует дополнительных затрат времени, а во-вторых, не следует забывать, что другие программисты 1С-Битрикс привыкли к определённой файловой структуре, принятой в этой CMS.

Не в моих интересах создавать сложности в работе коллегам.

Koala умеет работать с файлами стилей в разных каталогах проекта, но под управлением Microsoft Windows работает она отвратительно:

  1. В сложных проектах может не обновлять некоторые файлы. Уследить за массовыми изменениями в такой ситуации достаточно непросто.
  2. Настройка подключения работы с Compass Framework сопряжена с откровенными граблями.
  3. При работе с большим проектом, в котором используется Compass Framework, может внезапно сглючить и перекомпилировать все файлы без Compass, вписав туда просто сообщения об ошибках.

Koala использую только на OS X, поскольку на Mac она не заглючивает.

Полный список компиляторов можно найти на сайте SASS: http://sass-lang.com/install

В итоге решение со связкой настройки SASS в PhpStorm с подключением Compass Framework оказалось самым продуктивным.