Mixin-id LESS-is
Selles õppetükis tutvume mixin-ide (segamisega), mis võimaldab ühte klassi sisaldada teise klassi sees. Vaatame, mis see on ja kuidas sellega töötada.
Põhimõtteliselt on mixin ühe klassi kasutamine teiste klasside sees, kus üks klass on eelnevalt määratletud koodilõik, mida saame kasutada paljudes kohtades.
Miks see mugav on? Puhas CSS sunniks meid seda koodilõiku kõikjale kopeerima, kuid LESS-is saame selle kirjutada ühte kohta ja seejärel lisada selle vajalikku kohta koodis.
Vaatame näidet. Oletame, et meil on järgmine klass:
.mix {
width: 100px;
height: 100px;
}
Kasutame seda klassi mixin-ina:
p {
.mix;
color: red;
}
Tulemusena kompileeritakse meie klassi stiilid lõigu sisse:
p {
width: 100px;
height: 100px;
color: red;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
.mix {
color: white;
background: black;
}
p {
.mix;
width: 300px;
}
