Mixins i LESS

I denne lektion vil vi stifte bekendtskab med mixins (blanding), som gør det muligt at inkludere én klasse inde i en anden. Lad os finde ud af, hvad det er, og hvordan man arbejder med det.

I bund og grund er mixins brugen af én klasse inde i andre, hvor én klasse er en forhåndsudarbejdet del - et bestemt stykke kode, som vi kan bruge mange steder.

Hvordan er dette praktisk? I ren CSS ville vi være nødt til at skrive det forhåndsudarbejdede stykke kode overalt, hvor det er nødvendigt, men i LESS kan vi skrive det ét sted og derefter tilføje det til de nødvendige steder i koden.

Lad os se på et eksempel. Antag, at vi har følgende klasse:

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

Lad os bruge denne klasse som et mixin:

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

Som et resultat af kompileringen vil stilene fra vores klasse blive indsat i afsnittet:

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

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

p {
  .mix;
  width: 300px;
}