Использование примесей в LESS. Для чего в LESS нужны примеси
Иногда нам требуется создать стили, которые потом могут повторяться во всей таблице стилей. В этом нам помогут примеси в LESS.
Вы можете добавлять селекторы класса примесей и селекторы ID, например:
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
Вот какой результат:
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
Обратите внимание, что, когда вы вызываете примесь, круглые скобки ставить не обязательно.
//эти строки выполняют одну и ту же функцию
.a();
.a;
Примесь без вывода
Если вы хотите создать примесь, но не хотите, чтобы она была выведена, вы можете поставить после неё круглые скобки.
.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
Получим:
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
Селекторы в примесях
Примеси могут содержать не только свойства, но также и селекторы.
Например:
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
В результате получим:
button:hover {
border: 1px solid red;
}
Пространства имен
Если вы хотите смешать свойства внутри более сложного селектора, вы можете расположить множество ID или классов один над другим.
#outer {
.inner {
color: red;
}
}
.c {
#outer > .inner;
}
Опять же, и >
и пробел не обязательны/
// все эти строки одинаково функционируют
#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();
Один из вариантов использования известен как пространства имен. Вы можете разместить примеси под ID-селектором и в этом случае точно не будет конфликта с другими библиотеками.
Например:
#my-library {
.my-mixin() {
color: black;
}
}
// который может быть использован так
.class {
#my-library > .my-mixin();
}
Защищенные пространства имен
Если у пространства имен есть сдерживатель, примеси будут использоваться только если значение условия сдерживателя будет истинным(true). Сдерживатель пространства имен играет ту же роль, что и сдерживатель в примесях, соответственно эти две примеси функционируют одинаково:
#namespace when (@mode=huge) {
.mixin() { /* */ }
}
#namespace {
.mixin() when (@mode=huge) { /* */ }
}
Функция default
должна иметь одинаковое значение для всех встроенных пространств имен и примесей. Следующая примесь никогда не оценивается, один из ее сдерживателей гарантированно будет иметь значение false (ложь):
#sp_1 when (default()) {
#sp_2 when (default()) {
.mixin() when not(default()) { /* */ }
}
}
Ключевое слово !important
Используйте ключевое слово !important
после вызова примеси, чтобы отметить все свойства, полученные ей:
Например:
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
}
.unimportant {
.foo();
}
.important {
.foo() !important;
}
В результате:
.unimportant {
background: #f5f5f5;
color: #900;
}
.important {
background: #f5f5f5 !important;
color: #900 !important;
}