Mixini u LESS-u

U ovoj lekciji ćemo se upoznati sa mixinima (mešanjem), koji omogućavaju uključivanje jedne klase unutar druge. Hajde da shvatimo šta je to i kako se radi sa tim.

U suštini, mešanje je korišćenje jedne klase unutar drugih, gde jedna klasa predstavlja šablon - određeni deo koda, koji možemo koristiti na mnogim mestima.

Zbog čega je ovo zgodno? Na čistom CSS-u morali bismo da kucamo taj šablonski kod svuda gde je potreban, a u LESS-u ga možemo napisati na jednom mestu i zatim ga povezivati na potrebna mesta u kodu.

Pogledajmo na primeru. Neka imamo sledeću klasu:

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

Hajde da iskoristimo ovu klasu kao mixin:

p {
	.mix;
	color: red;
}

Kao rezultat, nakon kompilacije u paragraf će biti postavljeni stilovi naše klase:

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

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

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

p {
	.mix;
	width: 300px;
}