Toma el control de tus ficheros CSS

Hace un tiempo leí un artículo de Alberto Peña acerca de Sass, una herramienta para añadir características programáticas al código CSS. Posteriormente yo mismo realicé una entrada explicando como incluir Sass en un proyecto Java haciendo uso de Ant. En el último proyecto en el que estoy trabajando he optado por una aproximación diferente y quiero contártela :-)

Less es una herramienta que te aporta características similares a Sass, solo que no es necesario compilar los ficheros en el lado del servidor, sino que se compilan mediante JavaScript en el lado del cliente (aunque haciendo uso de Node.js puede hacerlo en el lado del servidor también). Esto tiene la desventaja clara que el cliente tiene más carga de proceso, pero la ventaja para el desarrollador de poder configurarlo mucho más rápidamente y reducir el tamaño de las dependencias del proyecto (además es una solución totalmente agnóstica del lenguaje y plataforma seleccionados).

Configurar Less

Toda la información se puede encontrar en la web de Less, pero es tan sencillo como incluir las siguiente líneas en la página web que estemos construyendo.

<link href="styles.less" rel="stylesheet/less" type="text/css"></link> <script src="less.js" type="text/javascript"></script>

Características de Less

Uso de variables

Esta característica es muy simple pero tremendamente útil. ¿Cuántas veces has querido guardar un color o un tamaño para poder usarlo en diferentes lugares?, pues ahora puedes.

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}


Mixins

De manera similar al uso de variables, se pueden construir también Mixins es decir, bloques de "código" más grandes que representan una serie de propiedades CSS a utilizar dentro de otras reglas. Esta en concreto es una de mis favoritas porque estamos haciendo uso de bordes redondeados y simplifica "muy mucho" el código a leer.

.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

form fieldset {
    border: 1px solid black;
    padding: 10px;
   
    .rounded-corners;
}


Realmente por no tener que escribir esas tres líneas para añadir un simple borde redondeado, merece la pena el uso de Less :-) Además, como sé que eres un lector observador, te habrás dado cuenta que los mixins están parametrizados. En este caso si no se indica nada, el valor del radio para los bordes redondeados es 5px, pero se podría instanciar con .rounded-corners(10px) y su valor sería 10px.

Reglas anidadas

No es realmente una característica que utilice muy a menudo, pero tiene su utilidad y puede simplificar un poco el código añadiendo algo de estructura al mismo.

#app-header {
    height: 70px;
    width: 1080px;
    margin: 0 auto;
    padding: 0 20px ;
    background: none repeat scroll 0 0 white;
   
    .bottom-rounded-corners(15px);
    .box-shadow(3px, 3px, 3px);
   
    div {
        float: left;
    }
   
    img.right {
        margin-top: 14px;
    }
}


Funciones y operaciones

Esta es otra característica que en mi caso no es muy utilizada, pero puedes hacer uso de operaciones matemáticas en la definición de reglas, o incluso algunas funciones propias de Less como desaturate().

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}


Less.app For Max OS X

Para todos aquellos orgullosos poseedores de un ordenador de la marca de la manzana, hay una aplicación llamada adecuadamente Less :-), que permite compilar ficheros .less en .css de forma directa y mediante una interfaz agradable. Yo personalmente no la uso casi nada, pero ahí lo dejo para quien le interese.

Interfaz de usuario de Less.app for Mac