Установка и компиляция

Less устанавливается как пакет npm и запускается командой lessc (Less compiler). Команда читает файл .less и записывает готовый .css. Понадобится Node.js версии 20 или новее.

Установка

Создайте папку для сайта и установите в неё Less как зависимость для разработки:

mkdir site
cd site
npm init -y
npm install --save-dev less
npx lessc --version

npm init -y создаёт package.json, а последняя команда выводит версию, например lessc 4.9.1 (Less Compiler) [JavaScript]. npx запускает lessc из папки node_modules проекта.

Структура проекта

Исходники лежат в styles/, скомпилированный файл — в css/, а страница подключает только CSS:

site/
├── index.html
├── css/
│   └── main.css      ← создаёт lessc
├── styles/
│   └── main.less     ← правите вы
└── package.json

Создайте styles/main.less:

// styles/main.less
@radius: 8px;
 
.card {
  padding: 16px;
  border-radius: @radius;
}

Компиляция

Команда принимает исходный файл и файл результата:

npx lessc styles/main.less css/main.css

Появится css/main.css:

.card {
  padding: 16px;
  border-radius: 8px;
}

В index.html подключите его как обычно: <link rel="stylesheet" href="css/main.css">. Если не указать второй аргумент, lessc выведет CSS прямо в терминал — удобно, чтобы быстро проверить результат.

Скрипты npm

Чтобы не набирать длинную команду, запишите её в раздел scripts файла package.json:

{
  "scripts": {
    "build:css": "lessc styles/main.less css/main.css"
  }
}

Теперь достаточно npm run build:css.

Слежение за изменениями

У lessc нет режима слежения, как у sass --watch. Его добавляет небольшой пакет chokidar-cli: он следит за файлами и запускает команду при каждом сохранении.

npm install --save-dev chokidar-cli

{
  "scripts": {
    "build:css": "lessc styles/main.less css/main.css",
    "watch:css": "chokidar \"styles/**/*.less\" -c \"npm run build:css\" --initial"
  }
}

Запустите npm run watch:css: флаг --initial сразу собирает CSS, а затем каждое сохранение любого .less в styles/ пересобирает css/main.css. Остановить слежение — Ctrl+C.

Полезные флаги

Карта исходников сообщает инструментам разработчика, из какой строки .less пришло правило.

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

Команда lessc styles/main.less без имени выходного файла ничего не сохраняет — она только печатает CSS в терминал. Если страница не обновляется, проверьте, что в команде указан css/main.css.