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:
.mix {
width: 100px;
height: 100px;
}
Nyní použijme tuto třídu jako mixin:
p {
.mix;
color: red;
}
V důsledku toho se po kompilaci do odstavce vloží styly naší třídy:
p {
width: 100px;
height: 100px;
color: red;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
.mix {
color: white;
background: black;
}
p {
.mix;
width: 300px;
}