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:
.mix {
width: 100px;
height: 100px;
}
Použime túto triedu ako mixin:
p {
.mix;
color: red;
}
Výsledkom po kompilácii bude, že do odseku sa vložia štýly našej triedy:
p {
width: 100px;
height: 100px;
color: red;
}
Popíšte, aký bude výsledok kompilácie nasledujúceho kódu:
.mix {
color: white;
background: black;
}
p {
.mix;
width: 300px;
}