Объяснять, что такое LESS, я не буду. Но таки пару слов скажу.
LESS — это динамический язык стилевой разметки, код на котором компилируется в стандартный CSS. LESS использует переменные*, операции и функции (нерасширяемый набор), а также миксины**, которые могут принимать параметры. Миксины при компиляции замещаются стилями. Операции и функции — результатами вычислений.
При объявлении миксина, принимающего параметры, обязательно должны указываться значения параметров по-умолчанию. Это позволяет, при желании, вызывать миксин без передачи всех или части параметров. Но миксин в LESS пока не поддерживает именованные параметры. То есть, если миксин объявлен с 10 параметрами и необходимо изменить значение только десятого по порядку, придется передавать и предыдущие девять тоже. Да, со значениями по-умолчанию.
Исходный код в jsFiddle.net***.
В классе
На помощь тут приходят переменные и область видимости миксинов. Значения параметров по-умолчанию можно вынести в переменные. При объявлении миксина передавать ему в качестве значений по-умолчанию вышеуказанные переменные. Перед вызовом миксина из какого-либо класса менять переменные для изменяемых параметров. Вызывать миксин без параметров (или с несколькими параметрами по-порядку). Так как переменная изменяется в области видимости класса, то вызов миксина идет с измененным значением. При выходе из области видимости, переменные вернутся к своим предопределенным значениям.
Исходный код в jsFiddle.net.
* На официальном сайте LESS сказано, что «переменные на самом деле являются константами, так как не могут быть переопределены». Но есть и другая точка зрения.
** Несмотря на то, что у перевода оригинального «mixin» как «примесь» есть сторонники, более органичным для языка является заимствование терминов вместе с технологией, так как заимствование получается идентичным по смыслу, без внешних контекстов.
*** Для работы с LESS на jsFiddle.net необходимо через ресурсы подключить файл less.js, а в панель редактирования javascript добавить две строчки
LESS — это динамический язык стилевой разметки, код на котором компилируется в стандартный CSS. LESS использует переменные*, операции и функции (нерасширяемый набор), а также миксины**, которые могут принимать параметры. Миксины при компиляции замещаются стилями. Операции и функции — результатами вычислений.
Проблема
При объявлении миксина, принимающего параметры, обязательно должны указываться значения параметров по-умолчанию. Это позволяет, при желании, вызывать миксин без передачи всех или части параметров. Но миксин в LESS пока не поддерживает именованные параметры. То есть, если миксин объявлен с 10 параметрами и необходимо изменить значение только десятого по порядку, придется передавать и предыдущие девять тоже. Да, со значениями по-умолчанию.
Исходные условия
Разметка
<div class="base-1">
Это "BASE-1"
</div>
<div class="extension">
Это "EXTENSION"
</div>
<div class="base-2">
Это "BASE-2"
</div>
Стили LESS
/* объявляем миксин с параметрами по-умолчанию */
.f-border (
@width: 4px,
@style: solid,
@color: #BE2
) {
border: @width @style @color;
}
/* вызываем миксин без параметров */
.base-1 {
.f-border;
}
/* вызываем миксин c параметрами */
/* при этом изменяется только третий */
.extension {
.f-border(4px, solid, #F16);
}
/* вызываем миксин без параметров */
.base-2 {
.f-border;
}
Результат
Исходный код в jsFiddle.net***.
Проблема
В классе
.extension
в миксин передается вместо одного изменяемого параметра целых три, два из которых совпадают со значениями по-умолчанию. В данном конкретном случае это не является проблемой, так как параметров достаточно мало. Но, к примеру, в моем проекте, связанном со сложным пользовательским интерфейсом, миксин для генерации стилей вкладок (tabs) принимает 18 параметров. Очевидно, что преимущества LESS в больших проектах сильно обесцениваются отсутствием именованных параметров.Решение
На помощь тут приходят переменные и область видимости миксинов. Значения параметров по-умолчанию можно вынести в переменные. При объявлении миксина передавать ему в качестве значений по-умолчанию вышеуказанные переменные. Перед вызовом миксина из какого-либо класса менять переменные для изменяемых параметров. Вызывать миксин без параметров (или с несколькими параметрами по-порядку). Так как переменная изменяется в области видимости класса, то вызов миксина идет с измененным значением. При выходе из области видимости, переменные вернутся к своим предопределенным значениям.
Стили LESS
/* переменные */
@f-border-width: 4px;
@f-border-style: solid;
@f-border-color: #BE2;
/* объявляем миксин */
/* параметры по-умолчанию - переменные */
.f-border (
@width: @f-border-width,
@style: @f-border-style,
@color: @f-border-color
) {
border: @width @style @color;
}
/* вызываем миксин без параметров */
.base-1 {
.f-border;
}
/* изменяем переменную только в области видимости */
/* вызываем миксин без параметров */
.extension {
@f-border-color: #F16;
.f-border;
}
/* вызываем миксин без параметров */
.base-2 {
.f-border;
}
Результат
Исходный код в jsFiddle.net.
Примечания:
* На официальном сайте LESS сказано, что «переменные на самом деле являются константами, так как не могут быть переопределены». Но есть и другая точка зрения.
** Несмотря на то, что у перевода оригинального «mixin» как «примесь» есть сторонники, более органичным для языка является заимствование терминов вместе с технологией, так как заимствование получается идентичным по смыслу, без внешних контекстов.
*** Для работы с LESS на jsFiddle.net необходимо через ресурсы подключить файл less.js, а в панель редактирования javascript добавить две строчки
document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].type = 'text/less';
less.refreshStyles();