IntelliJ IDEA: компилирование LESS в CSS

IntelliJ IDEA: компилирование LESS в CSS

iSergium

LESS - отличный CSS-препроцессор, позволяющий писать стили, используя переменные, функции и другие методы. Ближайшим аналогом являются SASS и SCSS. Для знакомства с LESS на htmlacademy.ru имеется хороший курс.

Основной вопрос, возникающий при работе с LESS, состоит в способе получения CSS-файла. Компилирование LESS на стороне клиента с помощью less.js отметается сразу из-за низкой эффективности, да и сами разработчики упоминают, что такой способ хорош только на этапе разработки и не рекомендуется для продакшена. Самым лучшим, на мой взгляд, вариантом является компиляция на лету, этот подход и разберу подробнее на двух примерах для IDE PhpStorm.

1. Плагин LESS CSS Compiler

Установка плагина для IDE:

  1. Скачать zip-архив по ссылке в разделе "Download plugin".
  2. В PhpStorm запустить настройки плагинов:
    File → Settings → Plugins
  3. Кнопка "Install plugin from disk", выбрать скачанный архив.
  4. После сохранения настроек потребуется перезапуск IDE.

После перезапуска в настройках появится пункт "LESS Profiles" в категории "Other Settings". Настройка проста и понятна, но есть тонкости:

  1. Плагин не любит символьные ссылки и пробелы в пути.
    При работе с ними зачастую может возникать ошибка "The selected LESS file does not have any CSS output directories mapped to it and cannot be compiled."
    The selected LESS file does not have any CSS output directories mapped to it and cannot be compiled
    В поля "LESS sourse directory" и "CSS Output Directory" нужно писать полный путь к исходной папке.
  2. Плагин не любит перекрёстные @import в LESS-файлах.
    То есть, например, если в файле 1.less есть @import "2.less", и в 2.less есть "@import 1.less", то компилирование может войти в вечную рекурсию.

При соблюдении этих правил плагин будет работать. Можно настроить автоматическую компиляцию при сохранении ("Compile automatically on save" в настройках) либо запускать команду вручную ("Compile to CSS" в контектном меню). "Compress CSS output" обязательно включить: полученный css-файл в таком случае не будет содержать комментариев, лишних отступов и из-за этого сократится его размер.

Compile to CSS

2. File Watchers & lessc

В этом варианте в IDE будет добавлен вотчер, который будет запускать компилирование. Само компилирование будет происходить с помощью пакета lessc, для которого требуется node.js. Для сжатия полученного css потребуется less-plugin-clean-css. Также понадобится менеджер пакетов npm.

Сначала установка nodejs и npm: скачать инсталляторы и исходники можно отсюда. Для linux удобнее установить из репозиториев:

sudo apt-get install nodejs
sudo apt-get install npm

Затем, уже для всех платформ, нужно установить сами пакеты, прописав в консоли или терминале (могут потребоваться права аминистратора):

npm install -g less
npm install -g less-plugin-clean-css

 После установки следует добавление вотчера в IDE: File → Settings → File Watchers → Add (зелёный плюс) → Less.

Add Less File Watcher

Выставленных по умолчанию настроек вполне достаточно для компиляции CSS, но желательно сделать ещё несколько действий.

New File Watcher LESS

  1. Во-первых, настроить сжатие исходящего css-файла: в Arguments прописать --no-color $FileName$ --clean-css="--s1 --advanced --compatibility=ie8", так задействуется less-plugin-clean-css, список его параметров можно посмотреть здесь.
  2. Далее, если требуется один конечный css-файл и есть главный less-файл (или несколько таких), в который импортируются все остальные, то нужно включить "Track only root files" - в таком случае компилироваться будет только он (или они), не захламляя папку лишними css-файлами.
  3. По-умолчанию css-файлы сохраняются в ту же папку, где находится less-файл. Это меняется в пункте "Output paths to refresh". Справа от этого поля  ввода (и нескольких других) находится кнопка "Insert macro", вызываемое после нажатия по ней окно содержит много полезных констант.
  4. Файлы, для которых будет работать вотчер, можно отфильтровать в Scope.