Stylus: el preprocesador CSS

Cuando hablamos de CSS nos referimos a un lenguaje encargado de definir el diseño de una página. Trabajar con él siempre ha sido muy crudo, demorado y tedioso pero muy importante para la maquetación. Por lo tanto, una de las grandes soluciones ha sido emigrar a compiladores que nos permitan trabajar de forma veloz y efectiva las hojas CSS. Escribir menos código y realizar la misma tarea. Enfocarnos más en la efectividad que en la sintaxis. Así llega Stylus.

¿Qué es Stylus?

Stylus es un preprocesador creado para arreglarnos la vida. A través de procesos de compilación nos permite escribir código ágilmente, es más limpio al momento de transformarlo a hojas CSS, ejecuta variables y crea anidaciones entre estilos, al igual que permite aprovechar herencias. Para instalarlo primero debes instalar NodeJS.

Instalacion NodeJS

Primero debemos instalar NodeJS (tranquilo, no haremos nada de backend):

Windows

Paso 1: ir a http://nodejs.org.
Paso 2: descargar el archivo.
Paso 3: instalar NodeJs.
Paso 4: buscar en sus programas instalados: "Node.js Command Prompt"
Paso 5: teclear node -v para comprobar que se instaló. Deberán tener v0.8.x.

Mac

Paso 1: ir a http://nodejs.org.
Paso 2: descargar el archivo.
Paso 3: instalar NodeJs.
Paso 4: abrir el programa "Terminal".
Paso 5: teclear node -v para comprobar que se instaló. Deberán tener v0.8.x.

Ubuntu

Paso 1: abrir la terminal.
Paso 2: Instalar dependencias así:

> sudo apt-get install build-essential git-core libssl-dev libssl0.9.8

Paso 3: descargar Node

> git clone git://github.com/joyent/node

Después entra al folder que acabas de descargar con:

> cd node

Paso 4: pasar a Node Js 0.8.4

> git checkout v0.8.4 

Paso 5: compilar e instalar NodeJS.

> ./configure> make > sudo make install

Paso 6: teclear node -v para comprobar que se instaló. Deberán tener v0.8.x.

Instalacion Stylus

Y ahora para instalar stylus debemos abrir consola o terminal (en caso de Windows debe ser una consola de node) y ejecutar el siguiente comando:

npm install stylus

Ahora debes saber que todos los archivos de Stylus tienen la extensión .styl y que aquí irá nuestro código. En Stylus se usa identación. Al igual que Python, se usará la asignación de estilos y un espacio después del atributo se interpretará como los dos puntos; olvídate del punto y coma, el enter lo reemplazará y ahora podrás poner variables y anidar estilos como en el siguiente ejemplo:

#home
    .container-noticer    
        border-bottom 1px solid #D6D7D7        
    .link-absolute    
        position absolute        
        left 0        
        z-index 4        
    .cont-left    
        width 665px        
        float left         
    .course    
    .course    
        height 454px        
        overflow hidden        
        font-size 0        
        &:hover        
            .image            
                width 50px                

Ahora para compilar nuestro archivo colocaras en la consola la siguiente línea:

stylus -c >< ubicacion/archivo.styl >> ubicacion/archivo.css