Less — это препроцессор CSS. Он расширяет язык CSS и добавляет переменные, миксины (mixin), функции. Это упрощает поддержку CSS, создание тем и расширение кода.

Less работает на платформах Node, в браузере и на Rhino. В интернете есть много сторонних инструментов для компиляции исходного кода Less.

Пример:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Результат компиляции

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Less запускается в командной строке через npm. Его скачивают как файл скрипта для браузера. Также его встраивают во многие сторонние инструменты. Смотрите раздел «Использование».

Установка

На сервере проще всего установить Less через npm, менеджер пакетов node.js. Способ такой:

$ npm install -g less

Использование в командной строке:

После установки Less компилятор Less доступен в командной строке. Вызов выглядит так:

$ lessc styles.less

Эта команда выводит скомпилированный CSS-код вstdout. Вы можете перенаправить вывод в файл:

$ lessc styles.less > styles.css

Чтобы вывести сжатый CSS, добавьте опцию-x . Для лучшего сжатия также можно использовать --clean-cssОпция включает сжатие через Clean CSS.

Если выполнить lessc без аргументов, в командной строке выводится список всех доступных опций.

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

Компилятор Less можно вызвать в коде (платформа Node) следующим образом.

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
  console.log(css);
});

Результат вывода:

.class {
  width: 2;
}

Анализатор (parser) и компилятор также можно вызвать вручную:

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
  if (err) {
    return console.error(err)
  }
  console.log(tree.toCSS());
});

Конфигурация

Компилятору можно передать несколько параметров:

var parser = new(less.Parser)({
  paths: ['.', './lib'], // Specify search paths for @import directives
  filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
  tree.toCSS({
    // Minify CSS output
    compress: true
  });
});

Сторонние инструменты

Подробную информацию о сторонних инструментах смотрите в разделе «Использование».

Командная строка Rhino

Каждый релиз less.js также содержит версию, совместимую с Rhino.

Для командной строки Rhino нужны два файла:

• less-rhino- .js — компиляция и выполнение,
• lessc-rhino- .js — поддержка командной строки.

Компиляция из командной строки:

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

Эта команда компилирует файл styles.less и сохраняет его как styles.css. Параметр выходного файла необязателен. Если его не указать, less по умолчанию выводит результат в стандартный поток вывода (stdout）。

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

Запуск less.js в браузере удобен для разработки, но не рекомендуется для продакшена.

Использовать Less.js на клиенте проще всего, и на этапе разработки это удобно. Но в продакшене важны производительность и надёжность. Поэтому рекомендуем выполнять предварительную компиляцию через node.js или другие сторонние инструменты.

Начнём. Добавьте на страницу.less ссылку на таблицу стилей и задайте атрибуту rel значение "stylesheet/less":

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Затем скачайте less.js и подключите его через тег<script></script> , разместив его внутри элемента<head> страницы:

<script src="less.js" type="text/javascript"></script>

Подсказка

• Обязательно загружайте таблицу стилей до less.js.
• Если загружено несколько.less файлов таблиц стилей, каждый файл компилируется отдельно. Поэтому переменные, mixin или пространства имён, определённые в одном файле, недоступны в других файлах.

Опции браузера

Определите глобальный объект<script src="less.js"></script> до less , чтобы задать параметры для Less.js :

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

Подробнее об опциях браузера

Загрузка для браузера

bower install less

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>

Less.js распространяется по лицензии Apache 2. Мы планируем в будущем перейти на двойную лицензию. Авторские права 2009-2014, Alexis Sellier и команда ядра Less (см. выше). Кратко:

Полная информация о лицензии Less.js находится в репозитории проекта, обратитесь к ней.