Использование плагинов

Как я уже отмечал ранее, CSS-препроцессор Less имеет возможность подключения плагинов, расширяющих основной функционал препроцессора. Все доступные на сегодняшний момент плагины можно найти в пакетном менеджере npm, используя для поиска ключевое слово — "less-plugin". Среди них довольно большое количество интересных и даже необходимых плагинов. Однако, давайте сначала посмотрим на то, как подключать плагины при компиляции less-файлов из консоли.

Дальнейшие манипуляции будут производиться с плагином less-plugin-functions, добавляющим возможность создания пользовательских функций.

Первым делом установим этот плагин локально или глобально. Я буду устанавливать глобально, поэтому у себя в консоли выполняю следующую команду:

$ npm i -g less-plugin-functions

Теперь обратимся к документации плагина и напишем небольшой пример, демонстрирующий работу функций:

// Исходя из документации, функции всегда должны начинаться со слова `function`
.function-hello() {
  return: "Hello!";
}

// Вызов функции производится без ключевого слова `function`
.test {
  content: hello();
}

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

$ lessc --functions styles.less
.test {
  content: "Hello!";
}

Заметьте, так как я не указал имя файла, в который компилятору необходимо сохранить результат компиляции — полученный результат был выведен в консоль.

Разумеется, простым возвращением результата функционал этого плагина не заканчивается: вы можете производить вычисления, конкатенировать значения свойств, вызывать другие функции и примеси...

Чтобы применить к файлу несколько плагинов, необходимо просто добавить их в команду, выполняемую в консоли:

$ lessc --functions --inline-urls styles.less

Использование плагинов в браузере

В документации сказано, что любой плагин может работать с компилятором, подключаемым как внешний скрипт к странице с одним лишь условием: подключение плагина и его описание должно быть произведено раньше, чем будет подключён сам файл библиотеки less.js:

<script src="plugin.js"></script>
<script>
less = {
  plugins: [plugin]
};
</script>
<script src="less.min.js"></script>

Здесь кроется одна большая проблема — чтобы начать использовать плагины в браузере, необходимо найти хотя бы один плагин, который способен это делать без предварительной сборки. Дело в том, что браузер не умеет работать с require(), используемым для подключения файлов скриптов в мире Node.js. Почти все плагины используют require(), так как разбиты на несколько логических файлов. Поэтому, перед тем, как приступить к подключению заветного плагина к странице — его нужно собрать, используя для этого, например, Browserify. К счастью, это не входит в план книги.