You are on page 1of 3

Stylus: el preprocesador CSS

Cuando hablamos de CSS nos referimos a un lenguaje encargado de


definir el diseo de una pgina. Trabajar con l siempre ha sido muy
crudo, demorado y tedioso pero muy importante para la
maquetacin. 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 cdigo y realizar la
misma tarea. Enfocarnos ms en la efectividad que en la sintaxis. As
llega Stylus.

Qu es Stylus?

Stylus es un preprocesador creado para arreglarnos la vida. A travs


de procesos de compilacin nos permite escribir cdigo gilmente, es
ms 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. Debern 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. Debern 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

Despus 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. Debern 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
extensin .styl y que aqu ir nuestro cdigo. En Stylus se
usa identacin. Al igual que Python, se usar la asignacin de estilos
y un espacio despus del atributo se interpretar como los dos puntos;
olvdate del punto y coma, el enter lo reemplazar y ahora podrs
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 lnea:

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

You might also like