En este tutorial les voy a explicar que es Stylus, como trabajar con este preprocesador de CSS.

En este tutorial aprenderemos ¿Qué es Stylus? y ¿Cómo empezar a trabajar con este preprocesador?. Espero que después de haber leído este tutorial comiencen a utilizar este fabuloso preprocesador de CSS.

¿Qué es Stylus?

Stylus es un preprocesador de CSS que nos ayuda a escribir código CSS de manera más eficiente y rápida. Los creadores de Sylus lo describen de la siguiente manera:

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 de CSS.

Algunas de las principales características que podemos mencionar de este preprocesador son las siguiente:

• No requiere el uso de llaves, dos puntos, comas y, punto y coma.
• Provee una Javascript API.
• Nos permite hacer uso de variables, funciones, mixins, condicionales
• Cuenta con una librería llamada nib que nos da muchos mixins para usar.

Para empezar a usar Stylus, primero debemos instalarlo. Para eso, hace unos días les enseñé en un tutorial  como hacerlo. Puedes ingresar a este enlace: Instalación de Stylus.

Ahora que ya lo tenemos instalado, empecemos a usarlo.

¿Cómo usar Stylus?

Lo primero que haremos será crear un archivo con extensión .styl, por ejemplo circulo.styl, y comenzaremos a escribir código con este lenguaje. De ejemplo haremos un circulo rojo de 50 px de ancho. Veamos como sería con Stylus.

.circulo
  background-color red
  width 50px
  height 50px
  border-radius 50%

Ahora que ya tenemos este código en Stylus vamos a convertirlo en CSS. Para eso abrimos nuestra terminal, nos ubicamos donde se encuentra nuestro archivo y corremos el siguiente comando:

$ stylus circulo.styl

Una vez que corremos este comando, nos sale compiled circulo.css. Esto quiere decir que se ha creado un archivo con el mismo nombre pero con extension css y, por supuesto con la sintaxis de CSS. Esta es la manera mas simple de compilar a CSS, pero existen otros comandos que nos pueden ser mas útiles.

Por ejemplo, ¿Que pasaría si queremos que nuestro archivo compilado se ubique en otro lugar?. Para eso tendremos que hacer uso de la opción --out o -o. Vamos a crear una carpeta llamada css en la misma ubicación de nuestro archivo y dentro de esa carpeta vamos a compilar el archivo creado.

$ stylus circulo.styl --out css/

Si ingresan a la carpeta css verán que el archivo compilado se encuentra dentro. Pero es tan cómodo para ningún desarrollador estar escribiendo este comando cada vez que hace cambios, para esto existe una opción que compilara nuestro archivo cada vez que guardemos un cambio en el archivo Stylus. La opción es --watch o -w.

 Ahora, veamos como quedaría el comando:

$ stylus -w circulo.styl

Dejan corriendo el comando y si hacen cambios en su archivo circulo.styl verán que automáticamente se compilara en css.

Como hemos visto, comenzar a trabajar con Stylus no requiere mucho tiempo ni esfuerzo, pero puede hacerte mucho más productivo tu trabajo. En los próximos días estaré publicando más tutoriales sobre este preprocesador Stylus.

Además les comento que en DevCode tenemos muchos cursos de desarrollo web, en los cuales puedes aprender desde cero, si creen que les falta aprender más, pueden inscribirse a nuestro curso de HTML y CSS. Los espero en el siguiente tutorial.