Подключение SASS (SCSS) к PHP Storm

SASS (SCSS) - это язык проектирования CSS файла, придуманный специально для облегчения работы с большими CSS файлами. SASS позволяет использовать функции, переменные, мискины и многое другое. Ниже я расскажу как подключить его в связке с PHP-Storm.

Порядок подключения

  1. Устанавливаем PHP-Storm.
  2. Скачиваем Ruby под Windows по этой ссылке и устанавливаем.
  3. В меню пуск ищем кнопку "Start Command Promt with Ruby" и запускаем.
    Ruby
  4. В открывшейся консоли прописываем команду "gem install sass" и дожидаемся окончания установки (внимание, возможно потребуется подключение к интернету).
  5. Прописываем в консоль "sass -v" , если консоль показала версию SASS, то все установилось успешно.
  6. Открываем PHP-Storm. Идем в File->Settings. Находим вкладку Tools->FileWatchers и нажимаем на "Добавить" (плюсик справа);
    SASS
  7. В поле Program указываем путь к файлу SCSS в папке "bin" директории Ruby (по умолчанию Ruby ставится в корень диска C). Остальные параметры выставятся автоматически, их менять не надо.
    Настройки SCSS
  8. Если вы хотите чтобы после сохранении вашего SCSS, файл CSS обжимался в 1 строку без пробелов и комментариев (повышает производительность), то дополнительно в поле Arguments пропишите в начало строки "--style compressed ".
    style compressed

Результат

В результате вы сможете пользоваться файлами SCSS и править их в соответствии с официальной документацией. Визуально иерархическом дереве проекта это будет выгнядеть так:

scss

Комментарии
Загрузить файл или картинкуПеретащить с помощью Drag'n'drop
Перетащите файлы
Ничего не найдено
 
Ваше сообщение отправлено!
Мы свяжемся с Вами в ближайшее время.
Отлично!