Dzisiaj kolejna przydatna konstrukcja LESS. Często zachodzi potrzeba stworzenia klasy na podstawie kilku innych klas. Załóżmy, że mamy:
.class1 { color:red; } .class2 { font-size:10px; } .finalClass { color:red; font-size:10px; border-color:blue; }
FinalClass składa się zarówno z class1 jak i class2. Ponadto rozszerza możliwości o border-color. Za pomocą mixin możemy kod skrócić do:
.class1 { color:red; } .class2 { font-size:10px; } .finalClass { .class1(); .class2(); border-color:blue; }
Oczywiście w praktyce przydatne jest to, gdy klasy mają więcej właściwości niż jedna. W przypadku jednej właściwości lepiej skorzystać ze zmiennych.
Powyższy mixin wykona się do wspomnianych wcześniej stylów:
.class1 { color: red; } .class2 { font-size: 10px; } .finalClass { color: red; font-size: 10px; border-color: blue; }
Możliwe jest również zadeklarowanie mixin za pomocą nawiasów ():
.class1() { color:red; } .class2() { font-size:10px; } .finalClass { .class1(); .class2(); border-color:blue; }
Różnica polega na tym, że na wyjściu nie pojawią się .class1\.class2:
.finalClass { color: red; font-size: 10px; border-color: blue; }
Do mixin można przekazać parametry:
.class1(@color) { color:@color; } .finalClass { .class1(blue); border-color:blue; }
Analogicznie, parametry mogą przyjmować domyślne wartości:
.class1(@color:green) { color:@color; } .finalClass { .class1(); border-color:blue; }
Należy pamiętać, że jeśli chce się przekazać kilka parametrów należy je oddzielić średnikiem tzn. @color;@color2 itd.
Tak jak w C#, parametry można przekazywać za pomocą nazwy czyli zamiast .class(red) można .class(@color:red). Do dyspozycji mamy również specjalny parametr o nazwie @arguments, który po prostu zawiera listę wszystkich argumentów:
.class1(@width;@style;@color) { border:@arguments; } .finalClass { .class1(@width:2px;@style:solid;@color:red); border-color:blue; }
Czasami zachodzi potrzeba odpalenia różnych mixin w zależności od kontekstu, np. używanego urządzenia. Spójrzmy na następujący kod:
.class1(mobile) { font-size:1px; } .class1(desktop) { font-size:2px; } .finalClass { .class1(mobile); border-color:blue; }
Zdefiniowaliśmy tutaj różne mixin w zależności od typu urządzenia. Przekazując jako parametr mobile, ustawimy rozmiar czcionki na 1. Na wyjściu pojawi się zatem:
.finalClass { font-size: 20px; font-size: 1px; border-color: blue; }
Jeśli zadeklarujemy pierwszy parametr jako zmienną wtedy uzyskamy generyczną klasę:
.class1(@device) { border-width:4px; } .class1(mobile) { font-size:1px; } .class1(desktop) { font-size:2px; } .finalClass { .class1(mobile); border-color:blue; }
W powyższym przypadku “mobile” zostanie dopasowany do dwóch klas:
.finalClass { border-width: 4px; font-size: 1px; border-color: blue; }
Jak widzimy, mixins mogą w znaczącym stopniu skrócić arkusze CSS poprzez unikanie duplikacji kodu.