Mixins ¿Y eso con qué se come?

Este artículo es parte de la serie uptoeleven: Less CSS publicada de 1 a 11 el 11 de febrero del 2012.

Los mixins son parte fundamental de los estilos en Less CSS, y la forma de funcionar es como las clases CSS pero se pueden reutilizar y parametrizar de forma que pueden simplificar bastantes tareas de diseño.

Qué se puede hacer con un mixin

Con un mixin podemos

• Definir un estilo básico y reutilizarlo dentro de toda la hoja de estilos. Por ejemplo un estilo de botón, y luego durante la hoja de estilos únicamente cambiar el color.
• Crear estilos de color, por ejemplo definiendo color de fondo y de texto y luego reutilizarlos más adelante para colorear elementos.
• Crear «funciones css» que en base a parametros recibidos definan los estilos, por ejemplo un mixin para crear bordes redondeados en don el parametro es el radio de los bordes.
• Combinar multiples clases para crear una nueva clase de estilos para un elemento. Por ejemplo combinar una clase que defina el estilo de un botón con una que defina los colores asociados a eliminar o aceptar, de forma obtenemos multiples combinaciones de boton+colores sin definir cada vez la forma del botón.

Cómo se crea un mixin

La forma de crear un mixin es muy sencilla, únicamente se define una clase y para invocarla en otra clase usamos su nombre seguido de punto y coma, así:

.boton{
  border-radius:4px;
  border:solid 1px #aaa;
  background:#ddd;
  color:#000;
}
.rojo{
  background:#f00;
  color:#fff;
}
.verde{
  background:#0f0;
 color:#fff;
}

.boton_verde{
  /* Se combinan dos clases anteriores para crear una tercera */
  .boton;
  .verde;
}

Si quisieramos simplifcar el ejemplo anterior utilizando parametros entonces lo harïamos de la siguiente forma:

.boton(@fondo: #ddd, @texto: #000 ){
  border-radius:4px;
  border:solid 1px #aaa;
  background:@fondo;
  color:@texto;
}

.boton_verde{
  /* Se envian los colores como parametros */
  .boton(#0f0, #fff);
}

En este segundo ejemplo nos ahorramos definir las clases .verde y .rojo, y nos da la ventaja de crear botones del color que querramos.

Más información sobre mixins

Enlace: Documentación oficial sobre Mixins | http://lesscss.org/#-mixins