A la hora de desarrollar una aplicación web, una práctica muy extendida es trabajar con LESS en vez de directamente con CSS.
Índice de contenidos
1. Introducción
A la hora de desarrollar una aplicación web, una práctica muy extendida es trabajar con LESS en vez de directamente con CSS. LESS es un lenguaje que extiende CSS dotándolo de comportamientos dinámicos como el uso de variables, operaciones o funciones. Pero si estamos trabajando en Maven, tener que compilar los ficheros .less a parte no es lo más práctico del mundo y muy propenso a errores humanos, sobre todo si estamos hablando de un proceso de despliegue continuo. Por suerte tenemos un plugin de Maven (https://github.com/marceloverdijk/lesscss-maven-plugin) que nos permite compilar los ficheros .less junto con el resto de nuestra aplicación. En la documentación del proyecto en GitHub tenemos las opciones de configuración disponibles (en inglés), aquí vamos a ver las opciones más comunes.
2. Entorno
El tutorial está escrito en el siguiente entorno:
-
Hardware: Portátil MacBook Pro 15’’ (2.3 GHz Intel i7, 8GB 1333 Mhz DDR3, 500GB Solid State SATA Storage)
-
Sistema Operativo: Mac OS X Yosemite 10.10.3
-
Java Virtual Machine (JVM) 8
-
Maven 3.3.3
3. Configuración de Maven
Para compilar nuestros ficheros LESS en Maven, hemos de añadir el plugin al pom.xml:
<span class="tag"><lesscss-maven-plugin.version></span>1.7.0.1.1<span class="tag"></lesscss-maven-plugin.version></span>
...
<span class="tag"></properties></span>
<span class="tag"><build></span>
...
<span class="tag"><plugins></span>
...
<span class="tag"><plugin></span>
<span class="tag"><groupId></span>org.lesscss<span class="tag"></groupId></span>
<span class="tag"><artifactId></span>lesscss-maven-plugin<span class="tag"></artifactId></span>
<span class="tag"><version></span>${lesscss-maven-plugin.version}<span class="tag"></version></span>
<span class="tag"><executions></span>
<span class="tag"><execution></span>
<span class="tag"><goals></span>
<span class="tag"><goal></span>compile<span class="tag"></goal></span>
<span class="tag"></goals></span>
<span class="tag"></execution></span>
<span class="tag"></executions></span>
<span class="tag"></plugin></span>
...
<span class="tag"></plugins></span>
...
<span class="tag"></build></span>
Si queremos modificar la configuración por defecto del plugin, podemos hacerlo mediante las opciones de configuración (la documentación del plugin recoge todas las opciones). Un ejemplo sería:
<span class="tag"><groupId></span>org.lesscss<span class="tag"></groupId></span>
<span class="tag"><artifactId></span>lesscss-maven-plugin<span class="tag"></artifactId></span>
<span class="tag"><version></span>${lesscss-maven-plugin.version}<span class="tag"></version></span>
<span class="tag"><configuration></span>
<span class="tag"><sourceDirectory></span>${project.basedir}/src/main/resources/less<span class="tag"></sourceDirectory></span>
<span class="tag"><outputDirectory></span>${project.basedir}/target/css<span class="tag"></outputDirectory></span>
<span class="tag"><compress></span>true<span class="tag"></compress></span>
<span class="tag"><force></span>true<span class="tag"></force></span>
<span class="tag"><includes></span>
<span class="tag"><include></span>fan.less<span class="tag"></include></span>
<span class="tag"></includes></span>
<span class="tag"></configuration></span>
<span class="tag"><executions></span>
<span class="tag"><execution></span>
<span class="tag"><goals></span>
<span class="tag"><goal></span>compile<span class="tag"></goal></span>
<span class="tag"></goals></span>
<span class="tag"></execution></span>
<span class="tag"></executions></span>
<span class="tag"></plugin></span>
La opción sourceDirectory nos permite indicar el directorio donde se encuentran los ficheros .less, y con outputDirectory indicamos dónde dejar los .css resultantes.
Si queremos minimizar el CSS obtenido (esto es, sin saltos de línea ni espacios innecesarios), lo conseguimos marcando la opción compress a true (por defecto es false).
Por defecto, el plugin sólo compila los .less si detecta que ha habido algún cambio en ellos. Para forzar la compilación independientemente de si han cambiado o no, sólo hay que añadir la opción force a true.
Por último, dentro de includes podemos añadir todos los ficheros .less que queremos compilar, añadiendo una línea de include para cada uno. IMPORTANTE: el plugin crea un fichero CSS por cada fichero LESS. Así que si queremos obtener un único .css lo mejor es tener un .less que importe todos los demás e incluir únicamente este .less “padre” en la configuración del plugin.
4. Conclusiones
El plugin de Maven para LESS nos permite compilar los distintos ficheros .less para generar el CSS final y permite cierto grado de configuración como la elección de los directorios fuente y origen, la opción de minimizar el CSS, etc. Sin embargo, el plugin nos creará un fichero .css por cada .less que tengamos sin tener ninguna opción (en el momento de escribir este tutorial) para generar un sólo .css. Pero esto lo podemos conseguir con un fichero .less principal que incluya imports al resto de ficheros e incluyendo únicamente ese fichero principal a la lista de compilación.
