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.