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ę:
.mix {
width: 100px;
height: 100px;
}
Użyjmy tej klasy jako mixinu:
p {
.mix;
color: red;
}
W wyniku kompilacji do akapitu zostaną wstawione style naszej klasy:
p {
width: 100px;
height: 100px;
color: red;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
.mix {
color: white;
background: black;
}
p {
.mix;
width: 300px;
}
