Stylus, una gran preprocesador CSS

Ahorra tiempo, esfuerzo escribiendo código CSS y se más rápido en tus proyectos
Parte 1 de 5

Si estás acostumbrado escribir código CSS, podemos concluir que puede ser un poco cansón escribir línea por línea, recordar de abrir y cerrar los corchetes o lo dos puntos, o duplicar varias veces la misma línea para hacerle pequeños cambios.

Sin embargo, eso ya quedo en el pasado, ahora existen herramientas que nos ahorra mucho trabajo cuando escribimos código CSS, nos ayuda a optimizar, trabajar ordenadamente de manera cómoda y rápida, se llaman Preprocesadores.

En internet hay muchos como LESS, SASS, pero quiero hablar un poco de STYLUS.

¿Qué es Stylus?

Ellos se describen así:

Stylus es un nuevo lenguaje revolucionario, proporcionando una forma eficiente, dinámica y expresiva para generar CSS. Soporta tanto una sintaxis con sangría y estilo normal CSS.

¿Cómo funciona Stylus?

Con Stylus nos olvidamos de los corchetes, los dos puntos y usamos su sintaxis. Cuando termínanos, guardamos el archivo con extensión .styl (style.styl) y lo procesamos convirtiéndolo en un archivo .css (style.css), optimizado y con el menor peso posible.

Lo que me gusta mucho de usar stylus es que podemos usar variables, funciones, ciclos y muchas cosas más en nuestro CSS.

Empezando con Stylus

Instalando Nod.js

1º. El primer paso es instalar Node.js, pues este es esencial para que stylus funcione. Ingresamos al sitio de http://www.nodejs.org/ y oprimimos el botón install.

Instalando Nod.JS

2º.  Ejecutamos el instalador de “node.js” en nuestro equipo.

Instalando NodJs

 

3º. Después de instalarlo, ejecutamos nuestra consola de comandos CMD como administrador.

4º. Podemos verificar si instalo bien el NOD.JS es escribiendo

En mi caso dice que tengo la versión V0.10.31

Verificar NOD.JS

 

Instalando Stylus

A continuación instalamos el stylus escribiendo en la terminal lo siguiente:

Con el prefijo -g, indicamos que deseamos que Stylus funcione en cualquier ubicación de nuestro equipo.

Instalando Stylus

Si todo salió bien, veremos el proceso de instalación en nuestra línea de comandos.

Aquí está la primera parte de este tutorial, en el siguiente veremos cómo usarlo con Sublime Text y en la tercera parte algunos ejemplos de cómo usar Stylus.

Segunda Parte: Stylus con Sublime Text

 No olviden seguirme en twitter @juksoto y hasta la próxima.

 

Etiquetas:, ,

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en