Работа с LESS в PhpStorm

LESS PhpStorm
{lang: 'ru'}

В этом посте я кратко расскажу о плагине “LESS CSS compiler” для PhpStorm, который я использую для работы с LESS в этой прекрасной IDE от JetBrains. Зачем он нужен, в чём плюсы, какой я нашёл недостаток и как с ним можно справится, рассказано ниже.

Как уже писал в одном из предыдущих постов, основой для дизайна своего блога я выбрал бесплатную версию CSS-фреймворка от PixelKit. Фреймворк поставляется в двух вариантах: как набор CSS-стилей и в виде *.less файлов. Начал я, естественно, с CSS. И очень скоро задумался об оптимизации — уж больно пухлый style.css у меня получался. Тут я вспомнил о LESS-версии фреймворка… Она была скачана, перемещена куда нужно, и встал вопрос "а чем же все это компилировать?".

Нужно было решение, которые могло бы компилировать *.less файлы на лету, сразу после их изменения. Недолго думая, я пробежался по репозиторию плагинов для PhpStorm. К счастью, там обнаружилось несколько плагинов, которые обещали именно то, что мне нужно. Я решил попробовать один их них. Это был "LESS CSS compiler".

После установки, плагин добавляет своё меню настроек к стандартным настройкам среды. Пункт называется "LESS Profiles". Как видно из названия, здесь настраиваются профайлы для LESS компиляции.

LESS CSS Comiler Settings

Предварительные настройки плагина LESS CSS compiler

Существуют две полезные настройки, позволяющие быть более гибким в расположении *.less-файлов. Плагину можно указать, какие ещё файлы нужно включить в проект (указав через запятую путь к ним). Но, что более важно, существует настройка, говорящая, какие файлы не нужно компилировать. Зачем она нужна? Дело в том, что, как правило, стили компилируются из нескольких *.less-файлов в один итоговый. Если не исключить все файлы, кроме заглавного, то после нескольких правок возле каждого *.less-файла появится скомпилированный для него *.css-файл с таким же именем. А вот если все основные *.less-файлы, кроме заголовочного, аккуратно лежат в отдельной папке, её можно добавить в исключения и тогда при компиляции на выходе получится только один выходной файл.

В целом плагин довольно удобный, имеет простые и понятные настройки, компилирует достаточно быстро… Но у него есть один неприятный недостаток: он не понимает пути к папкам, содержащие пробелы. Эту недоработку можно легко обойти, создав символическую ссылку на нужную директорию с таким же именем, но без пробелов, и скормить её плагину. Для него все будет выглядеть нормально, при этом работать он будет с файлами, лежащими где вам нужно.

В первую очередь нужно добавить новый профайл и задать ему имя.

Далее, указать путь к папке, где находятся *.less файлы. Плагин будет просматривать в том числе поддиректории.


В графе “CSS Output Directory” нужно указать, где будет находится скомпилированный CSS файл.

Также, можно отметить галочки напротив "Компилировать автоматически при сохранении" и "Сжать выходной CSS файл". Да, плагин все это умеет.

LESS CSS Comiler Profiles R

Существуют две полезные настройки, позволяющие быть более гибким в расположении *.less файлов. Плагину можно указать, какие ещё файлы нужно включить в проект (задав через запятую путь к ним). Но, что более важно, существует настройка, говорящая, какие файлы не нужно компилировать. Зачем она нужна? Дело в том, что, как правило, стили компилируются из нескольких *.less файлов в один итоговый. Если не исключить все файлы, кроме заглавного, то после нескольких правок возле каждого *.less файла появится скомпилированный для него *.css файл с таким же именем. А вот если все основные *.less файлы, кроме заголовочного, аккуратно лежат в отдельной папке, её можно добавить в исключения и тогда при компиляции на выходе получится только один выходной файл.

Выводы

В целом плагин довольно удобный, имеет простые и понятные настройки, компилирует достаточно быстро… Но у него есть один неприятный недостаток: LESS CSS compiler не понимает пути к папкам, содержащие пробелы.

Эту недоработку можно легко обойти, создав символическую ссылку на нужную директорию с таким же именем, но без пробелов, и скормить её плагину. Для него все будет выглядеть нормально, при этом работать он будет с файлами, лежащими где вам нужно.

Приятного использования ;)


Полезная статья? Их будет больше, если вы поддержите меня!