Плагины и JavaScript

Плагин — это модуль на JavaScript, который расширяет Less: добавляет функции, обрабатывает результат, меняет поиск файлов. Встроенных функций хватает для большинства задач, но иногда нужна своя — например, перевод пикселей в rem одной функцией. Sass для этого позволяет писать функции прямо на Sass через @function, а в Less функцию пишут на JavaScript.

Своя функция

Создайте файл styles/plugins/rem.js. Функция install получает объект less и реестр функций functions:

// styles/plugins/rem.js
module.exports = {
  install(less, pluginManager, functions) {
    functions.add('rem', (px) => new less.tree.Dimension(px.value / 16, 'rem'));
  },
};

less.tree.Dimension — это число с единицей, как его видит Less. Функция берёт значение в пикселях, делит на 16 и возвращает rem.

Подключение через @plugin

Директива @plugin загружает файл относительно текущего .less; расширение .js можно не писать:

// styles/main.less
@plugin "plugins/rem";
 
.title {
  font-size: rem(24px);
  margin-bottom: rem(8px);
}

.title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

<style>
  .title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
</style>
 
<h1 class="title">Новый пост</h1>
<p>Заголовок размером 1.5rem, то есть 24px при обычном размере шрифта.</p>

Последние версии Less 4 при этом выводят предупреждение: директива @plugin будет заменена в Less 5. CSS собирается как обычно, но держите плагины в одном месте, чтобы потом их было легко перенести.

Готовые плагины из npm

Многие плагины опубликованы в npm под именами less-plugin-... и подключаются флагом командной строки. Например, сжатие CSS:

npm install --save-dev less-plugin-clean-css
npx lessc --clean-css styles/main.less css/main.min.css

В css/main.min.css окажется CSS без пробелов и переносов строк — для публикации. В проекте на Vite сжатие делает сам Vite.

JavaScript внутри стилей

Старые версии Less позволяли писать JavaScript прямо в значении, в обратных кавычках: width: `16 * 2`px;. С Less 3 это отключено по умолчанию:

// styles/main.less
.sidebar {
  width: `16 * 2`px;
}

Компиляция останавливается с ошибкой Inline JavaScript is not enabled. Включить можно флагом --js или параметром javascriptEnabled: true, но это опасно: любой подключённый .less-файл сможет выполнить произвольный код на вашем компьютере или сервере сборки. К тому же возможность объявлена устаревшей и будет удалена в Less 5.

Частая ошибка

Встретив в старом проекте обратные кавычки, разработчики включают --js, чтобы «просто собралось». Лучше заменить выражение: для арифметики хватит операций Less ((16px * 2)), а для сложной логики — функции в плагине, как rem() выше.