Mejora tu CSS usando STYLUS

Usando el pre-procesador STYLUS

Si eres uno de los desarrolladores o diseñadores que les apasiona el código limpio, y fácil de mantener pues aquí esta STYLUS, un procesador que te brinda todas las características antes mencionadas.

Si quieres que tus estilos se renderizen de manera mucho mas rápida pues te dejo este pequeño tutorial, donde escribirás css de manera correcta

Para esta oportunidad instalaremos stylus para WINDOWS (7/8)

1.Para la instalación de stylus, debido a que es un pre-preprocesador necesitaras tener instalado node.

2.Para instalar node.js visitaremos desde su página y descargamos el instalador (click en install)

3.Una vez descargado, lo ejecutamos y le damos (típico siguiente) y listo.

4.Abrimos la terminal de windows y procedemos a teclear lo siguiente:

• npm -g install stylus 

5.Se descargaran los paquetes necesarios para la instalación, debido a que a instalación fue global (-g) no necesitara configuraciones. 

Listo tenemos instalado STYLUS!.

Para empezar a escribir código css de manera correcta

1.Creamos dos archivos en nuestra carpeta CSS de nuestro proyecto; el primero será style.css y el segundo será style.styl 

2.En nuestro head del documento principal (index/home), hacemos referencia al archivo style.css:

3.Ahora sí, empezamos a escribir css con stylus de manera correcta, les mostraré un pequeño ejemplo: 

4.Al ejecutar este pequeño código en nuestro navegador no saldrá nada, debido a que referenciamos el archivo .css y como directamente no estamos escribiendo nada. Cabe aclarar que lo que hemos hecho hasta ahora es solo escribir en el archivo style.styl, ahora debemos decirle que procese este script para que funcione nuestro css

5.Para poder procesar nuestro código escrito anteriormente, abrimos la terminal de windows y nos ubicamos a nuestra carpeta donde están nuestros css:

6. Luego escribimos lo siguiente: stylus -w -c style.styl , y enter, y listo ya tenemos nuestro codigo en el archivo .css 

7.Como vemos es un código muy comprimido, este permitirá la carga rápida del archivo. Listo ya tenemos un pre-procesador trabajando por nosotros y escribiendo código correcto.

Te agrado el pequeño tutorial. ACCEDE AL CURSO PRÁCTICO DE STYLUS CSS