Aprende qu es Stylus y cmo

instalarlo
Stylus es un pre-procesador de CSS que nace de la necesidad de optimizar
nuestras hojas de estilo. Gracias a sus caractersticas y funcionalidades,
podemos eliminar las limitaciones que trae consigo CSS y olvidarnos de
esas tareas repetitivas, complejas y frustrantes a las que estbamos
acostumbrados.
Las principales caractersticas de Stylus son:
Ofrece todas las capacidades de un pre-procesador estndar
Parntesis, llaves, comas, puntos y comas son opcionales
Uso de variables
Mixins y una librera llamada nib que hace ms poderosa esta funcin
Uso de funciones
Funciones aritmticas
Selectores anidados
Compresin de CSS
JavaScript API
Y muchas ms caractersticas que podrs encontrar en su pgina web aqu.
Vamos a la accin!Para instalar Stylus en nuestro equipo, debemos tener
una instalacin previa de Node,js, pues est basado en el
mismo.Ingresamos a la pgina de Node,js, donde encontraremos la versin
para Windows, Mac y Linux.

Despus 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 lnea: npm install stylus gLuego, para verificar que est
instalado correctamente escribimos: npm vEn la siguiente imagen se
describe el proceso:

La instalacin de Stylus ha sido todo un xito!Ahora realizaremos una

prueba.Inicialmente cre un archivo con extensin styl llamado (Estilo.styl)

con el siguiente cdigo:
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

tena el archivo (Estilo.styl)Para compilar mi archivo debo escribir en mi
consola de Windows el cdigo: stylus estilo.styl De esta forma, Stylus me
genera un nuevo archivo con extensin .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 bsico en el que podemos apreciar el poder que tiene

Stylus como pre-procesador. Aunque, para empezar a utilizarlo, lo ideal

sera tener un grado medio/alto de experiencia con CSS; para no cometer
errores o desesperarnos en el proceso.