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