Aprende qué es Stylus y cómo

instalarlo
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 –gLuego, para
verificar que esté instalado correctamente escribimos: npm –vEn 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:

body 

font 14px/1.5 Helvetica, arial, sans-serif 

button button.button 

input[type='button'] 

input[type='submit'] 

border-radius 5px

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;}

body button,body button.button,

body input[type='button'],

body input[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.