Миксины в LESS

В этом уроке мы познакомимся с миксинами (примешиванием), позволяющим включать один класс во внутрь другого. Давайте разберемся, что это такое и как с ним работать.

По сути примешивание это использование одних классов внутри других, когда один класс является заготовкой - определенным кусочком кода, который мы можем использовать во многих местах.

Чем это удобно? На чистом CSS нам бы пришлось набирать заготовку кода везде где она понадобятся, а в LESS можно написать его в одном месте и за тем подключать его в нужные места кода.

Давайте посмотрим на примере. Пусть у нас есть следующий класс:

.mix {
	width: 100px;
	height: 100px;
}

Давайте используем этот класс в качестве примешивания:

p {
	.mix;
	color: red;
}

В результате после компиляции в абзац подставятся стили нашего класса:

p {
	width: 100px;
	height: 100px;
	color: red;
}

Отмена компиляции примешивания

Класс, который мы используем в качестве примешивания, также попадет в результат компиляции.

Бывают, однако, ситуации, когда мы хотим создать какой то кусок кода, в качестве заготовки, для использования в других местах кода, и при этом сам сам по себе этот кусочек использоваться не будет.

Для отмены компиляции миксина нужно поставить после его имени круглые скобки, вот так:

.mix() {
	width: 100px;
	height: 100px;
}

Практические задачи

Расскажите, каким будет результат компиляции следующего кода:

.mix {
	color: white;
	background: black;
}

p {
	.mix;
	width: 300px;
}

Расскажите, каким будет результат компиляции следующего кода:

.mix() {
	color: white;
	background: black;
}

p {
	.mix;
	width: 300px;
}

Расскажите, каким будет результат компиляции следующего кода:

.mix1() {
	color: white;
	background: black;
}
.mix2() {
	width: 300px;
	height: 300px;
}

p {
	.mix1;
	.mix2;
}

Сделайте миксин .tnr, который будет задавать шрифт семейства Times New Roman.

Сделайте миксин .df, который будет задавать свойство display в значении flex.

Сделайте миксин .bold, который будет задавать свойство font-weight в значении bold.

Сделайте миксин .nowrap, который будет задавать свойство white-space в значении nowrap.