Mixiny w LESS

W tej lekcji zapoznamy się z mixinami (mieszaniem), które pozwalają dołączyć jedną klasę do wnętrza drugiej. Dowiedzmy się, co to jest i jak z tym pracować.

Zasadniczo mixin to użycie jednych klas wewnątrz innych, gdy jedna klasa jest szablonem - określonym fragmentem kodu, którego możemy używać w wielu miejscach.

Dlaczego jest to wygodne? W czystym CSS musielibyśmy wpisywać szablon kodu wszędzie tam, gdzie jest potrzebny, a w LESS można go napisać w jednym miejscu i następnie podłączać go w potrzebne miejsca kodu.

Spójrzmy na przykład. Załóżmy, że mamy następującą klasę:

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

Użyjmy tej klasy jako mixinu:

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

W wyniku kompilacji do akapitu zostaną wstawione style naszej klasy:

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

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

p {
  .mix;
  width: 300px;
}