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

Дата публикации: 31 08 2013 Автор: PazitiFF

Вот и я пришёл к тому, что использование 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 как на картинке ниже.

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

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

Инструкция для 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 вручную

Подключение less в phpstorm ubuntu

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

Комментарии

При установке на убунту при введении sudo apt-get update, пишет что не возможно установить файлы по ссылкам http://ppa.launchpad.net/alexey-smirnov/deadbeef/ubuntu/dists/saucy/main..., http://ppa.launchpad.net/tiheum/equinox/ubuntu/dists/saucy/main/binary-i... и установка далее не проходит.

Какая версия ubuntu?

Верисия 13.10 я уже нашел ответ, там все проще, $ sudo apt-get install nodejs
$ sudo npm install -g less и все заработало.

Как сделать так что бы если включен автодеплой то файл styless.css тоже заливался на сервер у меня сейчас только сам фай less.css заливается, это прискорбно

big big thank's!!!!!!

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

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Вы можете использовать подсветку исходного кода следующими тегами: <code>, <blockcode>, <apache>, <bash>, <css>, <drupal6>, <html5>, <javascript>, <mysql>, <php>.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.