Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Sass, Mixins y HTML5

Sass, Mixins y HTML5 25.SEP.14

Gianfranco Lemmo
Fundador WebBizarro

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.

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 traído 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 través 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 tuviéramos 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 prácticamente idéntico al anterior.

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

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