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 .

Instalación de Stylus

$ sudo npm install stylus -g

Características más importantes de Stylus

Compilación de CSS con 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

$ 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.