Mixiny v LESS

V tejto lekcii sa zoznámime s mixinmi (priemiešaním), ktoré umožňujú zahrnúť jednu triedu dovnútra druhej. Poďme sa pozrieť, čo to je a ako s tým pracovať.

V podstate priemiešanie je použitie jednej triedy vnútri druhých, keď jedna trieda je prípravou - určitým kúskom kódu, ktorý môžeme použiť na mnohých miestach.

V čom je to výhodné? V čistom CSS by sme museli písať prípravu kódu všade, kde je potrebná, ale v LESS ho môžeme napísať na jednom mieste a potom ho pripájať na potrebné miesta v kóde.

Pozrime sa na príklad. Nech máme nasledujúcu triedu:

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

Použime túto triedu ako mixin:

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

Výsledkom po kompilácii bude, že do odseku sa vložia štýly našej triedy:

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

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

p {
  .mix;
  width: 300px;
}