Подключение LESS и SCSS в PHPStorm на Ubuntu

Вот и я пришёл к тому, что использование LESS или SCSS при вёрстке сайта продуктивнее, удобнее и интереснее. Так же недавнего времени я пересел на PHPStorm, просто решил попробовать по совету товарища и уже не смог отказаться от этой чудесной IDE. Но статья конечно же не об этом, а о том как же установить LESS и SCSS в PHPStorm на Ubuntu, и работать в своё удовольствие.

Начну с SCSS:

Первым делом ставим Ruby и Rubygems

sudo apt-get install ruby-full rubygems

После успешной установки ставим sass:

sudo gem install sass

Вот вообщемто и всё, включаем PHPStorm и создаём в нужном месте файлик к примеру: style.scss

Лично у меня PHPStorm подхватил SCSS автоматически и тут же создал файлик style.css, в который поместил уже отформатированные стили.

Если же автоматизма не произошло, ничего страшного. Для начала можно узнать куда установился scss, для этого выполняем в консоле следующую команду:

whereis scss

Получим ответ, где лежит scss
scss: /usr/local/bin/scss

Запоминаем или копируем путь к компилятору и открымаем настройки в phpstorm

Settings -> Project Settings -> File Watchers

В окне выбираем SCSS и нажимаем на изображение карандаша. В открывшемся окне вручную вводим путь к SCSS как на картинке ниже.

Нажимаем ОК и пользуемся!!!

Инструкция для LESS:

Чтобы использовать свежую версию LESS, надо подключить репозиторий с новейшей версией node.js

sudo apt-add-repository ppa:chris-lea/node.js
sudo apt-get update

Далее ставим node.js и npm

sudo apt-get install nodejs npm

Ставим последний LESS

sudo npm install -g less

Если всё прошло успешно, в системе будет установлен самая свежая версия LESS!

К сожалению PHPStorm автоматически LESS не нашёл, поэтому проведём аналогичные действия, как и с SCSS, чтобы вручную указать путь к компилятору LESS.

Обращу внимание, что в системе LESS присутствует под названием LESSC, так как название less занято традиционной для unix like систем программой для чтения текста =)

whereis lessc

Плучаем ответ, в какой директории находится компилятор

lessc: /usr/bin/lessc

Далее делаем уже описанную выше опреацию, по указанию пути к lessc вручную

После проделанных операций, нужно создать в нужном месте файл style.less, внисти код, style.css должен создаться автоматически с уже отформатированными стилями!