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.
🌟 ¡Visita Nuestra Tienda para Programadores! 🌟Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!
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.
Este descargara un ejecutador el cual vamos a instalar no es nada complicado, solo le damos siguiente, aceptamos términos y condiciones.
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.
Ya habiendo hecho todo lo anterior podemos pasar a la maquetacion html.
Maquetacion html:
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.
cuando ya estemos allí, enlazaremos el archivo css a nuestro archivo html y comenzaremos a codificar código en el archivo styl.
Teniendo esto volveremos a la consola.
El nos dice el archivo en el cual fue compilado, abriremos nuestro archivo css y nos aparecerá de esta manera.
El coloca los corchetes, puntos y numerales.
De esta manera también podemos hacer lo mismo colocando variables.
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.
