Подключение 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 должен создаться автоматически с уже отформатированными стилями!
Комментарии
При установке на убунту при введении 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!!!!!!
Добавить комментарий