El lenguaje CSS ayuda a definir la presentación visual de los elementos de una página escrita en un lenguaje de marcas (como HTML). Sin una hoja de estilos en cascada, especificar el aspecto de un sitio web sería muy engorroso. Pero, por otra parte, la sintaxis de CSS presenta algunas limitaciones:

• No permite definir variables. Si necesitamos utilizar varias veces un mismo valor para distintas propiedades, nos veremos obligados a copiarlo y pegarlo cada vez.
• No permite reutilizar una regla entera como parte de otra regla.
• La herencia entre elementos puede resultar confusa.

Por suerte, existen herramientas que resuelven estos problemas. Un preprocesador de CSS nos permite escribir hojas de estilo con una sintaxis mejorada y las «traduce» al CSS oficial para que puedan ser interpretadas por un browser. El navegador no encontrará dificultades, ya que accederá a un documento compilado con la sintaxis normal.

Recientemente mencionamos LESS y Sass, pero hay otras opciones. Con Stylus podemos utilizar variables e incluso mixins, para invocar reglas enteras desde otra regla. Incluso podemos asignar valores nuevos a las propiedades de la regla invocada a través del pasaje de parámetros. Es decir, las reglas se comportan como procedimientos. De esta manera, reutilizamos código y ahorramos tiempo.

Pero Stylus va más allá y ofrece funciones para operaciones aritméticas y manipulación de colores, entre otras. También podemos definir funciones propias. Además, la sintaxis es mucho más limpia. En vez de escribir

body {
    color: #fff;
}

… podemos escribir

body
    color white

… y Stylus lo compilará al formato convencional.

Este sistema también simplifica la herencia entre selectores: si queremos definir el estilo de un elemento dentro de otro, en vez de escribir

#wrapper-principal p a {
…}

podemos escribir

#wrapper-principal
    p
        a
        …

Sin embargo, para que Stylus nos ahorre tiempo debemos conocer a fondo la sintaxis convencional de CSS. Además, sólo es aconsejable para un proyecto que se maquetará desde cero. Si la necesidad es incorporar reglas a una hoja de estilos ya existente, Stylus puede entorpecer el proceso.