Mixiny v LESS

V této lekci se seznámíme s mixiny (přimícháváním), které umožňují zahrnout jednu třídu do druhé. Pojďme zjistit, co to je a jak s tím pracovat.

V podstatě mixin je použití jedné třídy uvnitř jiné, kdy jedna třída je předlohou - určitým kusem kódu, který můžeme použít na mnoha místech.

V čem je to výhodné? V čistém CSS bychom museli předlohu kódu psát všude, kde je potřeba, zatímco v LESS lze napsat kód na jednom místě a poté jej připojit na potřebná místa v kódu.

Podívejme se na příklad. Předpokládejme, že máme následující třídu:

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

Nyní použijme tuto třídu jako mixin:

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

V důsledku toho se po kompilaci do odstavce vloží styly naší třídy:

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

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

p {
  .mix;
  width: 300px;
}