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