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

Например, код на 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 работает внутри Node, в браузере и внутри Rhino. Существуют также программные продукты, которые позволяют компилировать .less-файлы по мере их изменения.

Less может использоваться из командной строки при помощи npm, загружаться как скрипт в браузер, либо использоваться во многих сторонних программных продуктах. Перейдите в раздел «Использование» за более подробной информацией.

Установка

Самый простой способ установить Less на сервере — воспользоваться npm (менеджером пакетов node.js), например:

$ npm install -g less

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

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

$ lessc styles.less

что запишет вывод команды (скомпилированный CSS) в stdout, так что перенаправьте его в файл по вашему выбору:

$ lessc styles.less > styles.css

Чтобы итогом работы стал минифицированный CSS, укажите параметр запуска (опцию) -x. Если желательна еще большая минификация, можно воспользоваться Clean CSS при помощи опции --clean-css.

Запуск lesscss без параметров выведет все возможные варианты опций.

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

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

var less = require('less');

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

что выведет

.class {
  width: 2;
}

Вы можете также вручную вызвать парсер и компилятор:

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'], // Задаем путь поиска для директивы @import
  filename: 'style.less' // Указываем имя файла, для более понятных сообщений об ошибках
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
  tree.toCSS({
    // Минифицируем итоговый CSS
    compress: true
  });
});

Сторонние программные продукты

См. раздел «Использование» за подробностями по этому поводу.

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

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

Использование на стороне клиента — самый простой способ начать и хорошо подходит для разработки на Less, однако в продакшене, когда производительсности и надежность важны, мы рекомендуем предкомпилировать less-файлы при помощу node.js, либо любого из множества других программных продуктов.

Для начала, разместите ссылку на ваш файл .less, указав для него аттрибут rel со значением «stylesheet/less»:

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

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

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

Советы

  • Подключайте .less-файл(ы) с таблицами стилей до подключения скрипта.
  • Когда Вы подключаете более чем один файл .less, каждый из них компилируется независимо. Так что любые переменные, миксины либо пространства имен, что Вы задаете в одном из таких файлов, не будут «видимы» в других.

Опции при использовании в браузере

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

<!-- задаем опции до ссылки на скрипт less.js -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "комментарий",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

См. подробнее по ссылке «Опции при использовании в браузере».

Загрузка через браузер

Загрузить Less.js v1.7.3

загрузить исходный код

Загрузить исходный код свежей версии Less.js напрямую с GitHub.

Склонировать или форкнуть на GitHub

Форкните проект и дайте нам знать об этом через pull request!

Установить через Bower

Установите Less.js следующей командой:

bower install less

Less CDN

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

Less.js выпущен под лицензией Apache 2 License (хотя мы и планируем выпустить его под двойной лицензией). Авторские права 2009-2014 © 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.js (хотя мы будем рады получить их)

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