Muchas veces cuando trabajamos con las hojas de estilo tenemos que repetir reglas CSS por todo el documento:

header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Esto se convierte en un verdadero dolor de cabeza cuando la Hoja de Estilo crece o si decidimos cambiar algunas reglas CSS; ya que tuviéramos que revisar toda la Hoja de Estilo y realizar dicho cambio, como por ejemplo si decidiéramos ya no utilizar bordes redondeados o cambiarle las medidas a dicha propiedad.

Los Mixins de LESS CSS

Con los Mixins de LESS CSS podemos incrustar todas las propiedades de una clase en otra clase con sólo incluir el nombre de la clase como una de sus propiedades; funciona de forma muy parecida a las variables pero con clases enteras; si quisiéramos generar las reglas de arriba, podriamos hacer algo como esto:

.esquinas-redondeadas () {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}

header {
  .esquinas-redondeadas;
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

Esta es una de las propiedades más interesantes que nos brinda LESS CSS ya que permite heredar el contenido de estas clases a otras clases y así evita la repetición de reglas CSS y organizar la Hoja de Estilo.

Los Mixins de LESS CSS con pase de parámetros

Ahora bien para nuestro pequeño ejemplo, ¿Qué pasa si queremos que las medidas de los bordes del header sean distintas a las del footer?

Podemos hacer algo como esto:

.esquinas-redondeadas (@radio:5px) {
  -webkit-border-radius: @radio;
  -moz-border-radius: @radio;
  -ms-border-radius: @radio;
  -o-border-radius: @radio;
  border-radius: @radio;
}

.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}

header {
  .esquinas-redondeadas(10px);
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

Al compilar el código LESS anterior obtendremos:

header {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Como vimos en este último ejemplo, los Mixins en LESS CSS también pueden comportarse como funciones, y tomar argumentos lo que permite potenciar su funcionamiento.