Миксини в 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;
}