Переменные

Рассмотрим простой пример:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

Компилируется в:

#header {
  color: #6c94be;
}

Обратите внимание, что переменные могут быть определены только один раз и по сути являются «константами».

Миксины (Mixin)

Миксины — это способ включения («смешивания») набора свойств из одного набора правил в другой набор правил. Допустим, у нас есть следующий класс:

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}

И мы хотим использовать эти свойства внутри других наборов правил. Для этого просто нужно вставить имя класса там, где мы хотим применить свойства:

#menu a { color: #111; .bordered;}

.post a { color: red; .bordered;}.

Свойства класса .bordered теперь будут отображаться как в #menu a, так и в .post a. (Обратите внимание, что вы также можете использовать #ids в качестве миксинов).

Подробнее

Больше о миксинах

Параметрические миксины

Вложенные правила

Less даёт вам возможность использовать вложение вместо или в сочетании с каскадированием. Предположим, у нас есть такой CSS:

#header { color: black;} #header .navigation { font-size: 12px;} #header .logo { width: 300px;}

В Less мы можем написать это так:

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; }}.

Полученный код более лаконичен и имитирует структуру вашего HTML.

Вы также можете объединить псевдоселекторы с вашими миксинами, используя этот метод. Вот классический хак clearfix, переписанный как миксин (& представляет текущий родительский селектор):

.clearfix { display: block; zoom: 1;

:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden;}}.

Использование @import (http://lesscss.org/features/#import-options-less)

@import может использоваться для обозначения обычного поведения @import CSS; он также может использоваться для импорта файла Less или добавления содержимого ссылочного файла в выходной файл less.

Заявления @import могут обрабатываться Less по-разному в зависимости от расширения файла:

• Если файл имеет расширение .css, он будет рассматриваться как CSS, и оператор @import останется без изменений (см. опцию inline ниже).
• Если у него есть любое другое расширение, оно будет обрабатываться как Less и импортироваться.
• Если он не имеет расширения, будет добавлено .less, и он будет включён как импортированный файл Less.

Например: @import «a.css» @import «a.less»

Использование необязательных параметров:

Less предлагает несколько расширений к CSS @import at-правилу, чтобы обеспечить большую гибкость в работе с внешними файлами.

Синтаксис: @import (ключевое слово) «имя файла»;

Были реализованы следующие директивы импорта:

(reference): используйте файл Less, но не выводите его. (inline): включите исходный файл в вывод, но не обрабатывайте его. (less): рассматривайте файл как файл Less независимо от расширения. (css): рассматривайте файл как файл CSS независимо от расширения. (once): включайте файл только один раз (это поведение по умолчанию). (multiple): включайте файл несколько раз. (optional): продолжайте компиляцию, если файл не найден.

Можно использовать более одного ключевого слова на @import, для разделения ключевых слов необходимо использовать запятые:

Пример: @import (необязательно, ссылка) «foo.less»;