Less - быстрый старт в CSS
Less - это CSS препроцессор, расширяющий язык CSS поддержкой переменных, примешиваний (миксинов; mixins), функций и многих других вещей, что позволяет сделать CSS более поддерживаемым, тематизируемым и расширяемым.
Начало работы с Less
Less работает внутри Node, в браузере и внутри 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
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, output) {
console.log(output.css);
});
что выведет:
.class {
width: 2;
}
Конфигурация
Вы можете просто передать опции компилятору:
var less = require('less');
less.render('.class { width: (1 + 1) }',
{
paths: ['.', './lib'], // // Задаем путь поиска для директивы @import
filename: 'style.less', // Указываем имя файла, для более понятных сообщений об ошибках
compress: true // Минифицируем итоговый CSS
},
function (e, output) {
console.log(output.css);
});
Смотрите раздел Использование для большей информации.
См. раздел Использование за подробностями по этому поводу.
Командная строка с Rhino
Каждый релиз less.js также содержит версию, совместимую с Rhino.
Версия, в которой есть командная строка с 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 и сохранит результат в файл styles.css. Параметр выходного файла можно выбрать. Если он отсутствует, less запишет результат в stdout.
Использование на стороне клиента
Использование less.js в браузере прекрасно подходит на этапе разработки, но не рекомендуется для рабочего применения!
Использование на стороне клиента — самый простой способ для начала использования разработки на Less, однако в продакшене, когда производительсность и надежность важны, рекомендуется предкомпилировать less-файлы при помощи node.js, либо любого из множества других программных продуктов. Для начала, разместите ссылку на ваш файл .less указав для него аттрибут rel со значением stylesheet/less:
<link rel="stylesheet/less" href="styles.less" />
Далее, загрузите less.js и подключите его тегом с помощью тега <script></script> внутри тега head вашей страницы:
<script src="less.js" type="text/javascript"></script>
Советы по Less
- Подключайте .less-файл(ы) с таблицами стилей до подключения скрипта
- Когда Вы подключаете более чем один файл .less, каждый из них компилируется независимо. Так что любые переменные, миксины, либо пространства имен, что Вы задаете в одном из таких файлов, не будут «видимы» в других.
Опции при использовании в браузере
Опции указываются заданием их в глобальном объекте less до строки <script src="less.js"></script>:
<!-- задаем опции до ссылки на less.js -->
<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 или полифил-код).
<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
Лицензия в вопросах и ответах
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 (хотя мы будем рады получить их)