Aprende a crear CSS hermoso con Stylus – No. 1

Hola a todos compañeros de la comunidad, con mi primer post quiero hablarles de Stylus, un pre-procesador de CSS que les hará la vida más feliz.

¿Que es un Pre-Procesador CSS?

Son herramientas indispensables que nos ayudan a optimizar y administrar fácilmente nuestro código css. Con estas herramientas podemos realizar nuestro trabajo de una manera más ordenada y más rápida, ahorrando tiempo y dando mejores resultados.

Su funcionamiento es muy simple, nosotros escribimos nuestro código CSS normal, el de toda la vida en un archivo (generalmente css), los pre-procesadores lo que hacen es optimizar ese código para generar un archivo css más liviano que aporta de cara a la optimización de carga de un sitio web. Ese es todo el misterio no hay más.

En la internet existen varios pre-procesadores de código css, los más conocidos son:

• Sass
• Less
• Stylus

Puntualmente ahora quiero hablarles sobre Stylus, ¿y porqué Stylus?. Sencillamente porque en mi experiencia he comprobado que Less no es tan potente para cuando estamos desarrollando proyectos importantes como para clientes, es más para principiantes. Por otro lado Sass es muy bueno y potente al igual que Stylus, pero su modo de codificar es más complicada y menos sencilla e intuitiva que Stylus, por eso para mí Stylus es el mejor (es mi opinión). Yo personalmente uso stylus en todos mis proyectos y me encanta!

¿Que es Stylus?

Stylus es un pre-procesador de código CSS (al igual que Sass y Less) que nos ayuda bastante para generar nuestro código css de una forma muy optimizada y rápida.

Ellos se describen de la siguiente forma:

Stylus es un nuevo lenguaje revolucionario, proporcionando una forma eficiente, dinámica y expresiva para generar CSS. Soporta tanto una sintaxis con sangría y estilo normal CSS.

¿Como funciona Stylus?

Su funcionamiento es muy simple, nosotros le damos los códigos css a stylus, este los procesa y genera un archivo .css con los códigos optimizados y con el menor peso posible.

Bien, ahora que ya sabemos que es Stylus y cuál es su función, pasaremos a la instalación.

Instalando Stylus

1º Stylus necesita de node.js corriendo para poder funcionar por lo tanto el primer paso será instalar node.js, para ello ingresamos al sitio oficial de NodeJS y le damos al botón “Install”. Con ello nos descargará el instalador de nodejs.

2º Ejecutamos el instalador que es muy pero muy sencillo, debemos presionar los botones “Next->Next-Next-Finish”

3º Cuando ya esté instalado node.js abrimos nuestra terminal de windows (CMD) y escribimos: npm -g install stylus

4º Listo ya tenemos instalado Stylus.

Para no hacer tan largo el post, pararemos aquí, haré una segunda parte pronto, si tienes dudas, hazlas en los comentarios y cuéntanos que te parece este pre-procesador.

Pueden encontrar más información sobre stylus en la siguiente página:

http://learnboost.github.io/stylus/