Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

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

Superpoderes para CSS

Superpoderes para CSS 15.SEP.15

Alvaro José Rios Ch
Fundador WebBizarro

Siempre trato de mostrar herramientas que les ayuden a desarrollar más rápido lo que es muy importante, sobretodo para los desarrolladores freelance que tienen que sacarle provecho al máximo a su día, por eso quiero mostrarles una pequeña herramienta muy simple de usar que les ayudará a crear CSS mucho más rápido.

Rucksack es el nombre de la herramienta de la que vamos a hablar hoy y no es más que un post-procesador de CSS, la idea básica es que ustedes escriben CSS “normal” (lo pongo entre comillas y ya van a ver la razón) y luego la herramienta se encarga de entregarles el CSS procesado.

La idea de esta herramienta más que optimizar el código es poner en nuestras manos una serie de atajos que nos permiten con poco código hacer tareas comunes, por ejemplo si queremos que la tipografía de nuestro sitio varíe de acuerdo al tamaño de la pantalla entonces escribimos algo esto.

.foo {
    font-size: responsive;
}

Una vez que ejecutemos el post-procesador el se encargará de colocar el código necesario para que esto funcione correctamente, por eso les decía que era CSS “normal”, porque el valor responsive no es valido en CSS, pero Rucksack si sabe que hacer con él.

Tiene muchas funciones interesantes como el shortcut HEX RGBA que te facilita manejar los colores, ya que puedes usar los colores hexadecimales, esto es muy útil ya que es más fácil interpretar esos colores.

.foo {
    color: rgba(#fff, 0.8);
}

Bueno el resto de las funciones interesantes se las dejo a ustedes, también les voy a contar que pueden integrarlo con las herramientas que suelas usar, como grunt, gulp, broccoli, stylus, postcss y la línea de comando.