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:

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

Hajde da iskoristimo ovu klasu kao mixin:

styles.lessp {
  .mix;
  color: red;
}

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

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

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

p {
  .mix;
  width: 300px;
}