Less - препроцессор CSS и это говорит о том, что он расширяет язык CSS, добавляя такие возможности, как переменные, миксины, вложености, функции и много другое, которые сделают Ваш CSS более читабельным, легким и расширяемым.

Less можно запустить внутри Node.js, в браузере и в javascript движке Rhino. Есть также много сторонних нструментов (программ, палгинов и.т.д), которые позволяют компилировать Less файлы и отслеживать изменения. Наиболее легкий способ для тестирования 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%) }
}

После компилирования в CSS файле будет:

.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 для получения более подробной информации

Установка

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

$ npm install -g less

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

После установки, Вы можете вызвать компилятор из командной строки, как:

$ lessc styles.less

Скомпилированный CSS будет выведен в stdout. Для сохранения полученных CSS стилей в файл, Вы можете использовать команду:

$ lessc styles.less styles.css

Для вывода сжатого(минифицированного) CSS, можно использовать clean-css плагин. Когда плагин установлен, сжатый CSS файл можно получить добавив опцию --clean-css в командную строку:

$ lessc --clean-css styles.less styles.min.css

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

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

Вы можете вызвать компилятор в node.js, таким споcобом:

var less = require('less');

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

который выведет:

.class {
  width: 2;
}

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

Вы можете передавать определенные параметры для компиляции:

var less = require('less');

less.render('.class { width: (1 + 1) }',
    {
      paths: ['.', './lib'],  // Specify search paths for @import directives
      filename: 'style.less', // Specify a filename, for better error messages
      compress: true          // Minify CSS output
    },
    function (e, output) {
       console.log(output.css);
    });

Смотрите раздел Применение Less для получения более детальной информации.

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

Перейдите в раздел Применение Less для получения полной информации.

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

Каждая версия less.js также, всегда, явяляется rhino-совместимой.

Для запускай Less из командной строки в Rhino версии необходимо два файла:

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

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

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

Здесь будет скомпилирован styles.less файл и сохранен в CSS styles.css. Параметры для выходного файла, необязательны. Если они будут пропущены, less выведет результат в stdout.

Использование Less на стороне клиента(в браузере)

Использовать less.js в браузере очень полезно для разработки, но этот способ не рекомендуется для общего применения

Клиентская сторона(в даном случае браузер) - легкий и наиболее удобный способ познакомится с Less, но не продуктивный, когда важными элементами являются надежность и производительность, мы рекоммендуем, предварительно, компилировать код при помощи 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 файлы со стилями перед less.js.
  • При подключении, более чем одного .less файла, каждый из них, компилируется независимо. Таким образом все переменные, примеси, пространства имен, которые вы определите в одном файле, не будут доступны в остальных.
  • Из-за одной и той же политики браузеров, загрузка внешних ресурсов требует включенного CORS

Настройки в браузере

Свойства определяются путем задания их в глобальном less объекте , перед подключением <script src="less.js"></script>:

<!-- 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>

Или для краткости они могут быть установлены в качестве атрибутов на тегах сценария и ссылок (требуется поддержка браузера JSON.parse или polyfill).

<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

Последняя версия Less.js

Cкачать Less.js v2.6.1

Скачать исходный код

Скачать последнюю версию исходного кода Less.js, напрямую с GitHub.

Форк на GitHub

Форк на проект последней версии.

Установить при помощи Bower

Установить Less.js при помощи команды:

bower install less

Less CDN

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

Less.js выпущен под лицензией Apache 2 (хотя, имеются планы на двойную лицензию). Copyright 2009-2015, Alexis Sellier и Less Core Team. Если разделить лицензию и описать ее по частям, небольшими отрезки, то она может быть описана следующими условиями:

Позволяет:

  • Свободно скачать и использовать Less.js, полностью или частично, для личных или коммерческих целей.
  • Использовать Less.js в пакеках или дистрибутивах, который Вы создали сами.

Запрещает вам:

  • Распространять лубую часть Less.js без ссылки на источник.

Требует от Вас:

  • Вложить копию лицензии в любое программное обеспечение, которое Вы разрабатываете используя Less.js
  • Указывать аторство The Less Core Team, для любых разработок, включающих в себя Less.js

Не требует от Вас:

  • Включить источник Less.js, при каких-либо модификациях, которые вы сделали с ним, в программное обеспечение, которое использует Ваш измененный Less.js
  • Обратно передавать в Less.js изменения, которык Вы сделали сами(хотя, разработчики less будут только рады)

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