Примеси как функции, используемые в LESS
Переменные и примеси, определенные в примесях, являются видимыми и могут быть использованы в рамках вызова.
Есть лишь одно исключение, переменные не копируются, если вызов содержит переменную с таким же именем (которое включает переменную, определенную другим вызовом примеси). Только переменные, присутствующие в местных вызовах, являются защищенными. Переменные, взятые из «родительских» областей, отменяются.
Например:
.mixin() {
@width: 100%;
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}
Полученный CSS:
.caller {
width: 100%;
height: 200px;
}
Таким образом, переменные, определенные в примеси могут выступать в качестве возвращаемых ею значений. Это позволяет создать примесь, которую можно использовать почти как функцию.
Например:
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "вызвать" примесь
padding: @average; // использовать ее "возвращаемое" значение
}
Получим такой CSS код:
div {
padding: 33px;
}
Напрямую определенные переменные не могут быть отменены. Однако, определенные в «родительских» областях, переменные не защищены и будут отменены:
.mixin() {
@size: in-mixin;
@definedOnlyInMixin: in-mixin;
}
.class {
margin: @size @definedOnlyInMixin;
.mixin();
}
@size: globaly-defined-value; // «родительская» область – нет защиты
В результате:
.class {
margin: in-mixin in-mixin;
}
Наконец, примесь тоже функционирует как возвращаемое значение:
.unlock(@value) { // внешняя примесь
.doSomething() { // встроенная примесь
declaration: @value;
}
}
#namespace {
.unlock(5); // unlock doSomething mixin
.doSomething(); //nested mixin was copied here and is usable
}
В релультате:
#namespace {
declaration: 5;
}