Миксины

Базовое использование примесей

Примеси (от англ. 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;
}