Примеси с параметрами в препроцессоре LESS. Для чего нужны в LESS параметры в примесях
В случае, когда необходимо один набор свойств применить к нескольким элементам, но с разными значениями, вовсе не обязательно писать примеси по одной на каждый вывод.
Примесям можно передавать аргументы, которые в качестве переменных используются в блоке примеси.
Например:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
Применяем в различных правилах::
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
Параметры в примесях могут также иметь значения по умолчанию::
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
Мы можем ссылаться на него, как здесь:
#header {
.border-radius;
}
И подключить border-radius 5px.
Также можно использовать примеси, которые не принимают параметры. Это пригодится, если вы захотите спрятать примесь в CSS. При этом сама примесь будет использоваться (внутри блока объявлений):
.wrap() {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
Вот какой получится CSS:
pre {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
Примеси с несколькими параметрами в LESS
Параметры в LESS разделяются запятой или точкой с запятой. Рекомендуется все жеиспользовать точку с запятой, так как запятая в LESS имеет двойной смысл: ее можно интерпретировать как разделитель для разделения примесей или как разделитель селекторов в CSS.
Использование запятой в качестве разделителя аргументов у примеси делает невозможным создание списка CSS как аргумента. Тоесть, если компилятор видит по крайней мере одну точку с запятой при вызове примеси, он предполагает, что разделителем является точка с запятой и все запятые относятся к спискам CSS:
- Два аргумента и каждый содержит запятую:
.name(1, 2, 3; something, else)
,
- Три аргумента и каждый содержит одну цифру:
.name(1, 2, 3)
,
- Используется фиктивная точка с запятой, чтобы создать примесь с одним аргументом, который содержит запятые:
.name(1, 2, 3;)
,
- Значение по умолчанию с разделителем запятой:
.name(@param1: red, blue;)
.
Допускается определять несколько примесей с одним и тем же именем и количеством параметров. Если вы используете примесь с одним параметром, скажем, .mixin(green);
, то будут использованы свойства всех примесей с точно таким же обязательным параметром:
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}
Названные параметры
Ссылка на примесь может поставлять значения параметров по их именам, за место позиций. К любому параметру можно обратиться по имени, они для этого не обязательно должны располагаться в определенном порядке:
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
Компилируется в:
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
У @arguments
есть специальное значение в примесях, оно содержит все переданные аргументы, когда примесь вызывается. Это полезно, если вы не хотите разбираться с индивидуальными параметрами:
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}
В результате получим CSS:
.big-block {
-webkit-box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
box-shadow: 2px 5px 1px #000;
}
Дополнительные аргументы и переменная @rest
Вы можете использвать ...
, если хотите, чтобы примесь имела изменяемое количество аргументов. Использование многоточия после имени переменной присваивает ей эти аргументы.
.mixin(...) { // соотв. 0-N аргументам
.mixin() { // соотв. 0 аргументам
.mixin(@a: 1) { // соотв. 0-1 аргументам
.mixin(@a: 1; ...) { // соотв. 0-N аргументам
.mixin(@a; ...) { // соотв. 1-N аргументам
Более того:
.mixin(@a; @rest...) {
// @rest привязывается к аргументам после @a
// @arguments привязывается ко всем аргументам
}
Копирование шаблона
Иногда бывает нужно изменить поведение примеси, основываясь на параметрах, которые вы ей передаете. Начнем с основ:
.mixin(@s; @color) { ... }
.class {
.mixin(@switch; #888);
}
Теперь, к примеру, мы хотим, чтобы .mixin вёл себя иначе, основываясь на значении @switch
, мы можем определить .mixin
как таковой:
.mixin(dark; @color) {
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
Теперь, запустив:
@switch: light;
.class {
.mixin(@switch; #888);
}
Мы получим такую CSS:
.class {
color: #a2a2a2;
display: block;
}
Если цвет передается к .mixin
, результатом будет выделение текста светлым цветом Если значение @switch
было dark, результатом будет более темный цвет.
Вот, что произошло:
- Определение первой примеси не совпало, т.к. ожидалось, что dark будет первым аргументом.
- Определение второй примеси совпало, т.к. light ожидался.
- Определение третей примеси совпало, т.к. ожидалось любое значение.
Используются только определения совпавших примесей. Переменные совпадают и привязываются к любым значениям. Любые величины, кроме переменных, будут совпадать лишь со значением, равным своему собственному.
Арность также может совпадать, взгляните:
.mixin(@a) {
color: @a;
}
.mixin(@a; @b) {
color: fade(@a; @b);
}
Теперь, если вызвать .mixin
с одиночным аргументом, мы получим вывод первого определения, но если вызовем его с двумя аргументами, мы получим второе определение, а именно @a
, переходящее в @b
.