Utiliza Stylus como tu preprocesador de código CSS vol. 1

Este artículo lo escribí originalmente para ADWE. Aquí está el enlace de la fuente original.

Escribir código CSS sin un preprocesador a día de hoy es una tarea ardua, sobre todo si estamos desarrollando un proyecto de dimensión considerable que ha de estar optimizado y debe ser fácil de mantener y actualizar. Para ayudarnos en esta tarea tenemos estas herramientas que consisten en ahorrarnos parte del trabajo que conlleva el escribir código CSS, de manera que el resultado es una mayor comodidad y rápidez en nuestro trabajo. Existen varios preprocesadores a nuestra disposición como Less, Sass (del cual ya habló Roman aquí) o al que hoy pretendo dedicar este artículo: Stylus.

Cómo empezar a utilizar Stylus

Para utilizar este preprocesador es necesario instalar Node.js en nuestro entorno de trabajo. Para ello tendremos que descargárnoslo e instalar la versión correspondiente según nuestro sistema operativo.

A continuación tendremos que instalar Stylus desde nuestro terminal o línea de comandos, de la siguiente manera:

$ npm install -g stylus

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

Para empezar a trabajar necesitaremos crear un archivo con extensión .styl que será dónde escribiremos nuestro código CSS sin compilar y con la sintáxis de Stylus. Respecto a esto último, el principal problema que tendremos al escribir CSS en un archivo con una extensión distinta a los archivos de estilo convencionales es que el código no se nos coloreará.

Para solucionar este problema os recomiendo utilizar SublimeText3 (por su versatilidad a la hora de instalar extensiones y plugins que nos facilitan el trabajo) y la sintáxis de Stylus. Hay diversos tutoriales de cómo funciona el sistema de paquetes y extensiones de SublimeText2 así que os invito a que utilicéis vuestras grandes dotes de rastreadores de la red que seguro que poseéis.

Escribir CSS de la forma más natural posible

Si de lo que se trata es de seguir escribiendo CSS de manera más rápida y cómoda posible, ¿qué tal si nos olvidamos de las llaves, los dos puntos y los punto y coma que lleva cada regla CSS?

Gracias a Stylus tendremos la opción de escribir nuestra hoja de estilos de esta manera:

CSS Normal:

body{
    background-color: blue;
    font-size: 1.2em;
    margin: 2em 5%;
}

CSS Stylus:

body
    margin 2em 5%
    font-size 1.2em
    background-color blue

Para escribir una clase es de la misma manera sin olvidar su prefijo:

.wrapper
    width 100%
    max-width 1000px
    margin 0 auto

Otra de las ventajas que presenta stylus es la manera que tiene de escribir selectores descendentes de la siguiente forma:

nav
    float left
    margin-right 2%
    ul
        list-style none
        li
            float left
            a
                background-color #333
                color white
                display block

Variables

También tenemos la opción de utilizar variables para reutilizarlas a lo largo de nuestra hoja de estilos, por ejemplo:

font-size = 14px

body
    font font-size Arial, sans-serif

Este ejemplo podríamos extenderlo de la siguiente manera:

font-size = 14px
font = font-size ‘Open Sans’, Arial, sans-serif

body
    font font

Que daría como resultado el siguiente CSS normal:

body{
    font: 14px ‘Open Sans’, Arial, sans-serif;
}

Mixins

Con los mixins podemos crear funciones que declararán por nosotros una serie de estilos predefinidos:

border-radius(a)
    -webkit-border-radius a
    -moz-border-radius a
    border-radius a

button.btn
    border-radius(10px)

Resultado CSS:

button.btn{
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

Por último, me queda explicar cómo tenemos que compilar este archivo .styl para convertirlo en un archivo corriente CSS. Para ello tendremos que ir a nuestro terminal o a nuestra línea de comandos y ejecutar el siguiente código:

$ stylus -c style.styl

Es muy importante tener en cuenta que tendremos que movernos a la carpeta donde estén situados los archivos a compilar.

Seguramente os preguntaréis, ¿y si tengo que comprobar varios cambios en poco tiempo, tengo que compilar cada vez el archivo?. La respuesta es no. Para trabajar de una manera bastante más fluida y parecida a escribir un archivo CSS normal, podemos añadir un prefijo al comando anterior y ejecutarlo:

$ stylus -c -w style.styl

De este modo, Stylus se encargará de observar los cambios que se realicen a dicho archivo y en cuanto se produzcan, se pondrá a compilar para que tengamos los cambios de manera instantánea.

Y esto es todo, en el siguiente artículo veremos más cosas de este preprocesador de código CSS, además de mostraros una extensión que nos traerá una serie de mejoras (si es que no teníais suficiente con todo esto!).