Stylus, su instalación y como usarlo

Ya sabemos todos que CSS son las hojas de estilo en cascada de HTML, sabemos que su version mas actual es CSS3 y que vino con muchas mejoras, lo que muchos aun no saben es la existencia de los Frameworks CSS. En el siguiente enlace, de un post anterior, hablaremos de que son y para que sirven: La magia de los frameworks de CSS.

Hoy es el turno de Stylus para que hablemos de el; Stylus es un framework y un pre-compilador que funciona desde Node.js, por medio del command prompt que tiene diferentes funciones como por ejemplo la compresión de un archivo CSS (.css).

Este "inconveniente" (que se use con una terminal de intermediario) ,  que mas tarde veremos que para nada es uno, detiene a muchas personas a trabajar con él y deciden irse por otras alternativas como YAML o BluePrint.

Lo que hace Stylus mas que nada es simplificar el código para aumentar la rapidez de edición del mismo.
Si comparamos el codigo de stylus y el de css podemos ver facilmente la diferencia entre uno y otro:

CSS tradicional

body { font: 12px Helvetica, Arial, sans-serif; }
a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Stylus

body
  font 12px Helvetica, Arial, sans-serif
  
a.button
  -webkit-border-radius 5px
  -moz-border-radius 5px
  border-radius 5px

Se nota muy fácilmente que stylus no utiliza "{}", ":", ";", en cambio trabaja con identacion (el orden que le damos al código como vemos en el segundo ejemplo), esto en css tradicional no es necesario pero en stylus si pues con esto identifica los valores que están dentro de la etiqueta a la queremos editar.

Stylus trabaja con una extensión propia de el framework (.styl) que no podremos ocupar en ningún otro lugar, mas que con stylus. podemos ver mas caracteristicas de stylus desde su pagina principal: Stylus Framework CSS.

Ahora, ¿COMO INSTALO STYLUS EN MI ORDENADOR?

Para poder instalar Stylus antes debimos haber instalado NODE.js, vease Como intalar node.js en mi ordenador?

Vamos a la terminal que se instalo junto con Node.js :

 

y, tengamos el SO que tengamos, simplemente escribimos:

npm install stylus -g 

YA QUE LO TENEMOS INSTALADO ¿COMO LO USO?

Primero vamos a generar un archivo .styl con tu editor de codigo, en mi caso sublimetext2, donde colocaremos todo el codigo de stylus, recordemos que lo tendremos identado, sin llaves ("{}"), sin punto y coma (";") ni 2 puntos (":") y quedara como el ejemplo anteriormente mostrado.

Luego iremos a la terminal e iremos a la carpeta donde esta alojado nuestro archivo, imaginemos la ruta imaginaria de (C:\Users\UserName\Desktop\Carpeta). sabemos que esta en escritorio una carpeta con el nombre "Carpeta" donde esta nuestro pequeño archivo "estilos.styl". Para llegar a el necesitamos escrbir en terminal:

 "cd desktop"  - precionamos Enter (sabemos que cd sirve para ingresar a una carpeta), y ya se habra metiodo a la carpeta Escritorio, despues tecleamos
 "cd carpeta"  - precionamos Enter y se habra metido a la carpeta de nombre "Carpeta" la cual es contenedora de nuestro archivo.
y despues finalmente escribimos:
 "stylus estilos.styl"  - escribir el comando stylus hara que se active este mismo para compilar el archivo estilos.styl y volverlo estilos.css y sera contenido en la misma carpeta.

Aparte de esto stylus cuenta con diferentes funciones para poder verlas podemos teclear desde terminal   "stylus -h"  y nos aparecera algo como esto:

Estos se pueden usar de la siguiente manera:

Utilizaremos para el ejemplo -w (watch; para que cada cambio que se haga en el archivo se compile y no se tenga que volver a compilar a mano) y -c (compress; comprime el css, dejandolo de un tamaño pequeño casi ilegible que ahorra espacio y hace un archivo mas pequeño [por ejemplo de 5kb lo comprime a 2kb])

stylus -w -c estilos.styl