Миксины¶
Базовое использование примесей¶
Примеси (от англ. mix-in) — мощный инструмент, который позволяет Вам повторно использовать ранее созданные стили. Для этого достаточно добавить внутри блока объявления селектора наименование ранее созданного селектора (чьи стили необходимо импортировать):
.my-class,
#my-id {
color: red; // цвет текста
background: black; // цвет заднего фона
}
.centered {
text-align: center; //горизонтальное выравнивание текста по центру
}
.my-mixin-class {
.my-class(); // первый вариант (со скобками)
.centered; // второй вариант (без скобок)
}
#my-mixin-id {
#my-id(); // или вызов без скобок
}
Результат компиляции будет следующим:
.my-class,
#my-id {
color: red;
background: black;
}
.centered {
text-align: center;
}
.my-mixin-class {
color: red;
background: black;
text-align: center;
}
#my-mixin-id {
color: red;
background: black;
}
Создание примесей без транспиляции¶
Следующая полезная особенность использования примесей заключается в том, что если вы хотите создать примесь, но при этом не хотите, чтобы она попала в файл с таблицами стилей, то достаточно поставить скобки после названия селектора. Если вы частично знакомы с языками программирования, то вы обратите внимание, что этот синтаксис похож на вызов функции.
Перейдем к рассмотрению примера:
.my-output-class {
color: blue;
&:hover {
// стилизация элемента при наведении курсора мыши
color: green;
}
}
.my-not-output-class() {
color: green;
&:hover {
// стилизация элемента при наведении курсора мыши
color: red;
}
}
.button1 {
.my-output-class(); // допускается вызов примеси без двойных скобок
}
.button2 {
.my-not-output-class(); // допускается вызов примеси без двойных скобок
}
Обратите внимание на то, что у класса my-not-output-class
мы дополнительно указываем скобки, этим мы даем указание компилятору не создавать подобный отдельный класс CSS стилей, а только использовать в том месте, где мы его вызвали. Это необходимо, чтобы Ваши CSS стили оставались чистыми и не разростались неиспользуемыми классами.
Следующее на что необходимо обратить внимание, это то что примеси могут содержать не только свойства, но и вложенные селекторы и псевдоклассы. В результате компиляции класс my-not-output-class
не попадет в каскадные таблицы стилей:
.my-output-class {
color: blue;
}
.my-output-class:hover {
color: green;
}
.button1 {
color: blue;
}
.button1:hover {
color: green;
}
.button2 {
color: orange;
}
.button2:hover {
color: red;
}
Использование вложенных примесей¶
В некоторых случаях, например при использовании сторонних библиотек, для исключения конфликтования стилей, Вам необходимо будет поместить Ваши примеси внутри какого-то селектора, в некотрых источниках это называют использованием пространств имен. Этот термин пришел к нам из программирования.
Пространство имён (англ. namespace) — некоторое множество, под которым подразумевается модель, абстрактное хранилище, или окружение, созданное для логической группировки уникальных идентификаторов (то есть имён).
Например, поместим наши примеси внутри определенного класса:
.my-mixin-collection() {
// создаем внутри примеси два класса
.bordered {
border: 1px solid green; // сплошная граница размером 1 пиксель зеленого цвета
}
.hidden {
display: none; // элемент не отображается
}
}
button {
.my-mixin-collection
.hidden(); // вызываем примесь из класса .my-mixin-collection
.my-mixin-collection
.bordered(); // вызываем примесь из класса .my-mixin-collection
}
Обратите внимание на важный момент, мы не можем просто указать класс hidden
, или bordered
, так как они вложены в другой класс, а мы должны указать путь до примеси, и использовать любой валидный CSS селектор для этого, например:
.my-mixin-collection .hidden();
.my-mixin-collection > .hidden();
.my-mixin-collection.hidden();
// или синтаксис без скобок:
.my-mixin-collection .hidden;
.my-mixin-collection > .hidden;
.my-mixin-collection.hidden;
Результат компиляции будет следующий:
button {
display: none;
border: 1px solid green;
}
Использование ключевого слова !important в примесях¶
В LESS, как и в CSS предусмотрена возможность отменить значимость стилей, для этого необходимо добавить к значению CSS свойства ключевое слово !important
.
Что касается примесей, то вы можете использовать ключевое слово !important
как к самим свойствам внутри примеси, так и при вызове самой примеси, например:
.colored() {
// определяем примесь
color: red;
background: #000;
}
.hidden() {
// определяем примесь
display: none !important; // определяем свойство с ключевым словом !important
}
.my-element {
.hidden(); // вызываем примесь
}
.another-element {
.colored() !important; // вызываем примесь с ключевым словом !important
}
В этом примере мы создали две примеси и вызвали их внутри различных классов. Обратите внимание, что в первом случае мы просто вызываем примесь и при компиляции получаем аналогичное свойство с заранее определенным ключевым словом !important
.
Во втором случае мы добавляем ключевое слово !important
непосредственно к примеси в момент её вызова, в результате чего все свойства будут скомпилированы с этим ключевым словом:
.my-element {
display: none !important;
}
.another-element {
color: red !important;
background: #000 !important;
}