febrero 11, 2012

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

3 comentarios

  • Saludos, solo una preguntita, cuando combinaste el mixin este :

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

    boton y verde ambos tienen el atributo de “color” . cual se toma ?

    • Se toma el último mixin aplicado (.verde en este caso), es como una suma de valores pero cuando un valor se repite queda el último.

      Es importante tener en cuenta que las prioricades de CSS siguen siendo validas, es decir que si debajo de la clase .boton_verde usas agregas otras reglas como a.boton_verde o #miboton.boton_verde entonces estan tendran prioridad (la primera por especifica y la segunda porque IDs tienen prioridad sobre clases.

  • Aún no puedo entender por qué debo de usarlo, acaso no es lo mismo, sólo que la combinación la hacemos en el css y no en el html. Un simple ejemplo, comparado con lo publicado:

    CSS

    .btn{ display:inline-block; border:0; padding:10px 15px; border:0; outline:0; text-align:center; font-family:Arial; font-size:14px; color:#FFF; text-decoration:none; margin:10px}
    .azul{background:blue;}
    .negro{background:black}
    .radius{ border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;}

    HTML

    BOTON AZUL

    A ver si me convencen,

    Espero gracias

Comments are closed.

A %d blogueros les gusta esto: