Stylus: el pre-procesador CSS que debes conocer desde hoy

Hoy en día los frontends disponen de numerosas herramientas para realizar su trabajo de manera más ágil y productiva, desde frameworks HTML como Bootstrap o Foundation hasta módulos para Node.JS como son los preprocesadores css Stylus, Less y Sass, entre otras muchas utilidades. A continuación te presento mi pre-procesador css favorito: Stylus .

Algunos inconvenientes del CSS tradicional

Al realizar tareas de frontends todos nos hemos encontrado con algunos de los típicos problemas que tiene CSS:

No podemos hacer uso de variables ( *_* developers )
No podemos reutilizar código mediante funciones , solo creando nuevas clases.
Su sintaxis es repetitiva .
Llaves , paréntesis , puntos y coma que nos quitan tiempo de tipeado.
Varios prefijos para diferentes motores de navegadores en algunas reglas CSS.
Se puede convertir fácilmente en código espagueti en proyectos de gran tamaño .

Para solucionar estos problemas nacieron los llamados pre-procesadores css.

Instalación de Stylus

Stylus es uno de estos pre-procesadores que vienen para ayudarte en tu tarea de creación de hojas de estilo. Stylus está construido sobre Node,JS por lo tanto tendrás que instalarlo primero en tu sistema operativo. Más información sobre como instalar NodeJS en Nodejs.org .

Debes también instalar el gestor de paquetes de Node,JS: Node Package Manager NPM , aunque en las últimas versiones de NodeJS ya viene incluido por defecto.

Una vez tienes instalado Node,JS la instalación de Stylus es muy sencilla, la realizaremos por medio npm:

$ sudo npm install stylus -g

Características más importantes de Stylus

Paréntesis opcionales.
Llaves opcionales.
Puntos y comas opcionales.
Comas opcionales.
Uso de Variables.
Mixins.
Interpolación ( Uso de for X in Z )
Uso de funciones ( más de 60 funciones ya incluidas).
Compresión de Css
Selectores anidados.
Concatenación de Selectores.
Uso de funciones aritméticas.
Condicionales.
y muchás más!

Dispones de la lista completa en http://learnboost.github.io/stylus/ .

Compilación de CSS con Stylus

Cuando trabajamos con Stylus crearemos archivos con extensión .styl que serán los que se compilen para generar finalmente nuestro/s archivo/s .css .

Para realizar la compilación solo tenemos que usar el comando stylus:

$ stylus mi_estilo.styl mi_estilo.css

Con esto conseguiremos compilar el archivos mi_estilo.styl y generar el archivo mi_estilo.css.

Algunas de las opciones más interesantes a la hora de compilar son las siguientes:

Compresión de CSS: Conseguiremos archivos comprimidos css para ahorrar tamaño en el fichero css.

$ stylus --compress mi_estilo.styl > mi_estilo.css

Compilación de una carpeta completa:

$ stylus carpeta--out public/stylesheets

Compilación dinámica: Los archivos se compilarán automáticamente cuando realizamos un cambio en el archivo:

$ stylus -w mi_estilo.styl

Conversión de archivos CSS a STYL:

  $ stylus --css mi_estilo.css

nib - Extensiones de CSS3 para Stylus

Otra de las características de Stylus es que su funcionalidad puede ser extendida mediante otros paquetes que actuaran como plugins. Uno de estos paquetes es nib .

Instalación de nib:

$ sudo npm install nib -g

Para hacer uso de nib debes importarlo en losficheros .styl;

@import "nib"

Una vez lo tienes importado puedes escribir reglas de CSS3 sin preocuparte de los diferentes prefijos de motores de navegadores, ya que Stylus junto con nib se encargarán de añadirlos automáticamente en la compilación. Para realizar la compilación debes indicar a stylus que debe usar nib:

$ stylus -u nib mi_estilo.styl

Como has podido observar con la ayuda de Stylus podremos ser mucho más productivos y escribir código mucho más limpio para nuestras hojas de estilo CSS.

En los próximos artículos verás esto de una manera más clara con ejemplos de código y vídeos explicativos.

No olvides que debes dejar tus comentarios y sugerencias aquí abajo.

¿Qué tal tu experiencia con Stylus u otros pre-procesadores CSS?