Sass, Mixins y HTML5

Less y Sass siguen siendo los frameworks más conocidos a la hora de realizar tareas de preprocesado con CSS. Ambos nos permiten crear variables y funciones a nivel de CSS que podremos reutilizar en otras hojas permitiéndonos un mayor acercamiento al principio DRY (Dont Repeat Yourself) a nivel de las hojas de estilo.

Sass y Mixins

Hoy por hoy parece que la potencia que tiene Sass como preprocesador de CSS se esta imponiendo. El apoyo de los desarrolladores, que lo ven como un buen complemento a las herramientas que ellos tienen esta siendo clave. Ademas HTML5 ha traido nuevos quebraderos de cabeza ya que al ser todavía su soporte parcial entre los navegadores nos vemos obligados a construir estructuras CSS 3 muy repetitivas continuamente. Algunas de las más habituales son similares a esto:

  p {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

El código nos indica que deseamos que el párrafo tenga los bordes redondos. Sin embargo debido a la necesidad de cubrir varios navegadores nos vemos con la necesidad de repetir esta operación tres veces.

Para evitar estos problemas los preprocesadores de CSS nos permiten una mayor flexibilidad a traves tanto del uso de variables como del uso de mixins. Estos son bloques de código reutilizables en distintas zonas de la hoja de estilo. Si tuvieramos que definir este mismo bloque de código con Sass el resultado sería el siguiente:

@mixin radiosRedondos($radio){

-webkit-border-radius: $radio;
-moz-border-radius: $radio;
border-radius: $radio;

}

p {

@include radiosRedondos(5px);

}

Como podemos ver la posibilidad de reutilización de código es clara. Al pasar este código por el procesador de Sass obtendremos un resultado practicamente idéntico al anterior.

p {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

/*# sourceMappingURL=004Radios.css.map */

El uso de HTML5 favorecerá que cada día apostemos más por este tipo de herramientas y frameworks basados en ellos como Compass y Bourdon