Миксины в LESS (примеси)

В этой статье мы продолжим изучение динамического метаязыка LESS и научимся с помощью него переиспользовать наш CSS код, что позволит увеличить скорость написания стилей и от части упростить процесс верстки Ваших страниц.

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

Примеси (от англ. 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. Если Вы не знакомы с этой особенностью CSS, то перед дальнейшим изучением Вы можете получить эту информацию в статье учебника CSS 3 'Каскадность' в разделе отмена значимости стилей.

Что касается примесей, то вы можете использовать ключевое слово !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;
}