Работаем с less в Sublime Text. Компилируем less исходники Bootstrap

Используем less из Sublime текст. Компилируем less исходники Bootstrap

Less — это препроцессор для CSS стилей. В двух словах — это CSS который можно программировать. Если вы не используете препроцессоры, то рекомендую ознакомиться и начать использовать.

Самый простой способ начать компилировать less код в css в Sublime Text — это установить плагин Less Build. Главное чтобы в пути к компилируемому файлу не было русских символов, и работать он будет хорошо. Для новичков этого вполне хватит. Еще можно установить плагин BuildOnSave, чтобы билдить не сокращением Ctrl+B, а нажимать привычное Ctrl+S, и билд будет происходить по сохранению файла.

Но вот я решил скомпилировать less исходники Twitter Bootstrap, и не тут то было. Консоль Build Results начала выдавать множество ошибок, в самых разных файлах. Все дело в том что в less были обновлены правила синтаксиса, причем достаточно давно, но эти новшества в плагинах для Sublime Text видимо не были внедрены. Поэтому необходимо изменить способ сборки less файлов. Прошу не пугаться, займет это не более 5 минут.

Компилируем less исходники bootstrap в Sublime Text

1. Добавляем подсветку синтаксиса less в SublimeText

Открываем SublimeText, запускаем package control — install package. Как установить менеджер расширений package control читаем здесь. Устанавливаем плагин less — Syntax highlighting. Теперь у нас есть подсветка less кода.

2. Устанавливаем less компилятор

Сначала необходимо скачать и установить Node.js и NPM (Node Package Manager — входит в состав node.js). После этого запускаем консоль, если у вас нет консоли — скачиваем консоль ConEmu для Windows, устанавливаем и запускаем консоль. В консоли вводим команду для установки компилятора less:

npm install -g less

3. Устанавливаем Less build плагин в Sublime Text

Запускаем Package Conrol → Install Package и устанавливаем плагин Less2Css

4. Компилируем less

Создаем две папки в проекте less и css. В less — кладем less исходники Bootstrap, открываем файл bootstrap.less и компилируем.Css — оставляем пустой, в нее будет сохранен скомпилированны css из less исходника.

Если возникла ошибка: Unable to interpret argument clean-css … заходим в консоль и пишем:

npm install -g less-plugin-clean-css

Ссылки по теме:

http://stackoverflow.com/questions/15848679/installation-of-less2css-in-sublime-text-2-cmd-path-issue
http://veadev.tk/2014/11/27/less-unable-to-interpret-argument-clean-css/

https://coderwall.com/p/dgzwba/how-to-set-up-a-less-build-in-sublime-text
http://www.webmaster-source.com/2013/08/28/setting-up-a-less-workflow-in-sublime-text/