Документация LESS
  • Начало работы с Less
  • Как использовать Less
    • Инсталляция
    • Использование командной строки
    • Использование в коде
    • Конфигурация
    • Сторонние программные продукты
  • Командная строка с Rhino
  • Использование на стороне клиента
    • Советы
    • Опции при использовании в браузере
  • Загрузка Less.js
  • FAQ по лицензии
  • Oбзор возможностей
    • Переменные
    • Примешивания
    • Вложенные правила
    • Nested Directives and Bubbling
    • Операции
    • Escaping
    • Функции
    • Пространство имен и Аксессоры
    • Scope
    • Комменарии
    • Импортирование
  • Переменные
    • Обзор переменных
    • Интерполяция переменных
    • Селекторы
    • URLы
    • Операторы импорта
    • Свойства
    • Имена переменных
    • Ленивая загрузка
    • Переменные по-умолчанию
  • Расширения
    • Extend Syntax
    • Extend Attached to Selector
    • Extend Inside Ruleset
    • Extending Nested Selectors
    • Exact Matching with Extend
    • nth Expression
    • Extend «all»
    • Selector Interpolation with Extend
    • Scoping / Extend Inside @media
    • Duplication Detection
    • Use Cases for Extend
    • Classic Use Case
    • Reducing CSS Size
    • Combining Styles / A More Advanced Mixin
  • Примеси
    • Примесь без вывода
    • Селекторы в примесях
    • Пространства имен
    • Защищенные пространства имен
    • Ключевое слово !important
  • Примеси с параметрами
    • Примеси с несколькими параметрами
    • Названные параметры
    • Переменная @arguments
    • Дополнительные аргументы и переменная @rest
    • Копирование шаблона
  • Примеси как функции
  • Передача наборов правил примесям
    • Области видимости
  • Директивы импорта
    • Расширения файлов
  • Опции импорта
    • reference
    • reference example
    • inline
    • less
    • css
    • once
    • multiple
    • optional
  • Сдерживатели примесей
    • Операторы сравнения сдерживателей
    • Сдерживатели логических операторов
    • Функция проверки типа
    • Условные примеси
  • Сдерживатели CSS
  • Закольцовывания
  • Объединение свойств
    • Запятая
    • Пробел
  • Родительские селекторы
    • Множественный &
    • Изменение порядка селекторов
    • Комбинирование селекторами

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

  • Загрузка с GitHub

    Последнюю версию Less.js можно скачать непосредственно с GitHub.

  • Установка LESS с помощью Bower

    Установите проект и скрипт Less.js путем запуска этой команды:

    bower install less

Лицензия в вопросах и ответах

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 (хотя мы будем рады получить их)
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
© 2009-2017 WebSketches.ru