Hojas de estilo CSS con less

Hay herrmientas que surgen con el paso del tiempo y uno se pregunta como podría haber vivido antes sin ella o como no ha existido desde un principio. Una de ellas podría ser perfectamente less. Esta herramienta permite generar archivos css utilizando una notación más legible,  mantenible y compacta que se agradece cuando estamos desarrollando un proyecto con gran cantidad de trabajo de diseño además de poder usar variables y operaciones que la propia notación de las hojas de estilo css no soportan. En la propia página de less puede verse como es el lenguaje, no es muy complicado y en unas pocas horas ya estamos capacitados para utilizarlo de forma básica.

Los archivos less se compilan con nodejs generando archivos css tradicionales. Esta compilación no hace falta que la hagamos nosotros a través de nodejs ya que se puede delegar en el navegador del usuario si no nos importa cargar un archivo js más en nuestra página y vemos que la carga no se ralentiza en demasía. En la propia página de inicio de less está perfectamente explicado con un ejemplo de dos líneas.

Si optamos por compilar archivos less primeramente deberemos instalar el paquete nodejs que para Windows hay un binario y para otros sistemas quizá haya que compilarlo desde el código fuente. En Arch Linux, como siempre, es tan fácil instalarlo como ejecutar un comando y tendremos su la última versión cada vez que hagamos una actualización del sistema:

$ yaourt -S nodejs

Una vez que tenemos nodejs descargaremos la propia librería less y con el siguiente comando podremos compilar un archivo less:

$ lessc ejemplo.less > ejemplo.css
$ lessc -x ejemplo.less > ejemplo.css

Con la opción «-x» generamos un archivo eliminando los espacios innecesarios lo que hará que el archivo sea más pequeño. Si en vez de ejecutarlo desde la línea de comandos queremos incluir la compilación dentro de la herramienta de construcción que utilicemos podemos hacerlo con lo siguiente en caso de utilizar Gradle:

task less << {
 ant.exec(executable: "${LIB_HOME}/less.js-1.0/bin/lessc", output: 'src/main/webapp/css/ejemplo.css') {
  arg(line: 'src/main/webapp/css/less/ejemplo.less')
 }
}

Y con Ant sería similar:

<target name="less">
    <exec executable="${LIB_HOME}/less.js-1.0/bin/lessc" output="src/main/webapp/css/ejemplo.css">
     <arg line="src/main/webapp/less/ejemplo.less"/>
    </exec>
</target>

Referencia:
http://lesscss.org/
http://twitter.github.com/bootstrap/
http://www.archlinux.org/packages/community/x86_64/nodejs/
Como crear y usar sprites en páginas HTML