Escribir código CSS dinámico con Stylus

Css

En este post le enseñare como escribir código css dinámico con stylus, ademas de la instalación de este, para que sirve y como se utiliza.

¿Que es stylus?

Es un pre-procesador de css en el que tu le escribes código de manera diferente y el lo va compilar. Nos permite escribir código sin tener que llevar la sintaxis correctamente.

Este nos ayuda es a eliminar de cierta manera los corchetes, puntos, para que el momento de hacer nuestro código css sea de manera mas rápida.

Ademas de facilitar nuestro trabajo Stylus  nos permite el uso de variables, funciones, mixins, condicionales.

Cuenta con una librería llamada nib que nos da muchos mixins para usar, nos provee una javascript API.

Instalación de stylus: 

Primero descargaremos nodes  ya que Stylus corre con sobre el.

escribir

Este descargara un ejecutador  el cual vamos a instalar no es nada complicado, solo le damos siguiente, aceptamos términos y condiciones.

escribir

Cuando haya terminado vamos abrir la consola que el nos ha instalado. En ella vamos poder instalar Style y pondremos el siguiente comando.

npm -g install stylus y daremos enter.
escribir

Ya habiendo hecho todo lo anterior podemos pasar a la maquetacion html.
Maquetacion html:

escribir

Es algo sencillo, es solo para practicar y aprendamos como utilizarlo.

Escribir código css dinámico con Stylus:

Abriremos la consola de node  y buscaremos donde tenemos el archivo html  ademas de esto tenemos dos archivos, uno punto css  y otro punto styl.

escribir

cuando ya estemos allí, enlazaremos el archivo css  a nuestro archivo html y comenzaremos a codificar código en el archivo styl.

escribir

Teniendo esto volveremos a la consola.

escribir

El nos dice el archivo en el cual fue compilado, abriremos nuestro archivo css  y nos aparecerá de esta manera.

escribir

El coloca los corchetes, puntos y numerales.

De esta manera también podemos hacer lo mismo colocando variables.

escribir

y para cada vez que haga una modificación hay que ir a la consola y poner el mismo comando para que se actualice en nuestro archivo css.

escribir