Aprende qué es Stylus y cómo instalarlo

¿Qué es Stylus?

Stylus es un pre-procesador de CSS que nace de la necesidad de optimizar nuestras hojas de estilo. Gracias a sus características y funcionalidades, podemos eliminar las limitaciones que trae consigo CSS y olvidarnos de esas tareas repetitivas, complejas y frustrantes a las que estábamos acostumbrados.

Las principales características de Stylus son:

• Ofrece todas las capacidades de un pre-procesador estándar
• Paréntesis, llaves, comas, puntos y comas son opcionales
• Uso de variables
• Mixins y una librería llamada nib que hace más poderosa esta función
• Uso de funciones
• Funciones aritméticas
• Selectores anidados
• Compresión de CSS
• JavaScript API
• Y muchas más características que podrás encontrar en su página web aquí.

¡Vamos a la acción!

Para instalar Stylus en nuestro equipo, debemos tener una instalación previa de Node,js, pues está basado en el mismo.

Ingresamos a la página de Node,js, donde encontraremos la versión para Windows, Mac y Linux.

Después de Node,js pasaremos a instalar Stylus.

• Abrimos una terminal de Windows y nos dirigimos a la carpeta de Node,js (Program Files).
• Escribimos la siguiente línea: npm install stylus –g
• Luego, para verificar que esté instalado correctamente escribimos: npm –v

En la siguiente imagen se describe el proceso:

¡La instalación de Stylus ha sido todo un éxito!

Ahora realizaremos una prueba.

• Inicialmente creé un archivo con extensión styl llamado (Estilo.styl) con el siguiente código:

bodyfont14px/1.5 Helvetica, arial, sans-serif 

buttonbutton.buttoninput[type='button'] input[type='submit'] 
     border-radius5px

• Abrí nuevamente mi consola de Windows y me dirigí a la carpeta donde tenía el archivo (Estilo.styl)
• Para compilar mi archivo debo escribir en mi consola de Windows el código: “stylus estilo.styl” De esta forma, Stylus me genera un nuevo archivo con extensión .CSS

Que se verá de la siguiente forma:

body { 
    font: 14px/1.5 Helvetica, arial, sans-serif; 
} 

bodybutton, bodybutton.button, bodyinput[type='button'], bodyinput[type='submit'] {
    border-radius: 5px; 
} 

Este es un ejemplo básico en el que podemos apreciar el poder que tiene Stylus como pre-procesador. Aunque, para empezar a utilizarlo, lo ideal sería tener un grado medio/alto de experiencia con CSS; para no cometer errores o desesperarnos en el proceso.

¡Stylus tiene mucho más! ¿Quieres aprender a hacer mixins, variables y funciones? Vamos a aprenderlo todo en nuevo curso de Stylus en Platzi.