Миксины в LESS

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

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

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

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

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

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

p {
	.mix;
	color: red;
}

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

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

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

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

p {
	.mix;
	width: 300px;
}