Mixinek a LESS-ben

Ebben a leckében megismerkedünk a keverékekkel (mixinekkel), amelyek lehetővé teszik, hogy egy osztályt egy másik osztályon belül használjunk. Értsük meg, mik ezek és hogyan kell velük dolgozni.

Lényegében a keverék (mixin) azt jelenti, hogy egyes osztályokat más osztályokon belül használunk, amikor egy osztály egy előre megírt kódrészlet – egy olyan kódrész, amelyet számos helyen felhasználhatunk.

Miért kényelmes ez? Tiszta CSS esetén minden alkalommal le kellene gépelnünk ezt a kódrészletet ott, ahol szükséges, míg a LESS-ben egyszer megírhatjuk, majd a kód szükséges részein belül használhatjuk.

Nézzünk egy példát. Tegyük fel, hogy van a következő osztályunk:

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

Használjuk ezt az osztályt keverékként (mixin-ként):

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

Az eredmény a fordítás (kompiláció) után az lesz, hogy a bekezdésbe (p elembe) bekerülnek az osztályunk stílusai:

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

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

p {
  .mix;
  width: 300px;
}