Mixins i LESS
I denne leksjonen vil vi bli kjent med mixins (innblanding), som gjør det mulig å inkludere én klasse inni en annen. La oss finne ut hva det er og hvordan man jobber med det.
I bunn og grunn er mixing bruk av en klasse inni andre, der én klasse er en mal - et bestemt kodesnutt, som vi kan bruke på mange steder.
Hvorfor er dette praktisk? I ren CSS ville vi måttet skrive mal-koden overalt der den trengs, mens i LESS kan vi skrive den på ett sted og deretter koble den til i de nødvendige delene av koden.
La oss se på et eksempel. La oss si at vi har følgende klasse:
.mix {
width: 100px;
height: 100px;
}
La oss bruke denne klassen som en mixin:
p {
.mix;
color: red;
}
Som et resultat, etter kompilering, vil stilene fra klassen vår bli satt inn i avsnittet:
p {
width: 100px;
height: 100px;
color: red;
}
Forklar hva som blir resultatet av kompilering av følgende kode:
.mix {
color: white;
background: black;
}
p {
.mix;
width: 300px;
}
