Recientemente me tope con que CSS3 introducía el concepto de mixins en su estándar lo cual me pareció bastante acertado, y esperando que no se introduzcan aún mas brechas en el estándar que tanto dolor de cabeza nos produce (ahemmm internet explorer) decidí hacer un pequeño post explicando qué son y cómo usarlos.
Los mixins permiten que los desarrolladores creen patrones de propiedades llave-valor los cuales puedan ser reutilizados en cualquier parte del documento. Esencialmente para declarar un mixin se debe tener un nombre de clase que identificará dicho mixin y justo antes de este identificador debe anteponerse la palabra @mixin. Por ejemplo:
@mixin .espacio {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
A simple vista parece bastante inútil! pero lo mejor está por venir. Resulta que podemos incluir este patrón de propiedades en otro set de reglas que definen otra clase.
.contenido {
include: .espacio;
}
Vaya! ahora no parece tan inutil! el pequeño mixin nos ha ahorrado incontables líneas de código que antes de que esto fuera posible hubiéramos tenido que repetir una y otra vez a lo largo de la hoja de estilos.
Pero la diversion no termina ahi! dentro del concepto de mixin no entra solo todo aquello que tiene la palabra @mixin existen además otras formas de introducir conceptos de programación orientada a objetos dentro de nuestras hojas de estilo. uno de ellos es que ahora podemos crear “funciones” que reciben parámetros y que pueden ser reutilizables ahorrandos código y tiempo de vida.
Tomemos como ejemplo que queremos hacer que un elemento tenga fondo verde y letras blancas en algunas ocasiones y que tenga fondo rojo y letras negras en otras. y que además estos elementos tengan los bordes redondeados en ambas ocasiones.
Declaramos algo asi como esto:
.elemento(@fondo: #ddd, @texto: #000 ){
border-radius:4px;
border:solid 1px #aaa;
background:@fondo;
color:@texto;
}
Por default vamos a decir que los parámetros fondo y texto del mixin son gris y negro respectivamente, pero luego queremos que otro elemento use la combinación que antes mencionamos.
.fondo_verde {
.elemento(#009037, #FFF)
}
Entonces ahora todo lo que sea fondo_verde tendrá fondo verde, letras blancas y bordes redondeados. excepto que antes cada vez tendríamos que haber escrito 4 lineas y ahora solo lo escribimos una, y puedes jugar con los colores como se te venga en gana. De esta forma existen menos limitaciones en el estándar y te permite hacer mas con menos codigo.
Entonces podemos concluir que el concepto de “mixin” viene del anglo mix in que significa “añadir algo” ya que es precisamente lo que hace. Agrega algo a una clase o selector existente, algo personalizado segun el gusto y gana del desarrollador y nos facilita la vida de maneras exquisitas. Debo admitir que escribir css no es de mis cosas favoritas en el mundo, pero cosas como estas hacen que sea un poco mejor.
Espero que el post les haya ayudado a entender el concepto y que hagan volar su imaginación con esta información. Ya para terminar los dejo con un gif de Peter Grffin que describe exactamente cómo me siento al escribir css para internet explorer 🙂
