Integrar Less CSS en Drupal

Las hojas de estilo han dejado de ser, desde hace ya mucho tiempo, sólo una forma de agregar estilos básicos a nuestra Web. Día a día los proyectos van siendo cada vez más grandes y las hojas de estilo pasan a tener un papel más determinante al controlar estilos más complejos y que deben valer para muchos dispositivos. LESS nace con el objetivo de que nuestros ficheros CSS sean más inteligentes y soporten funciones, variables y métodos, que den como resultado una hoja de estilos más fácil de mantener y más productiva.

Mas allá de que podemos integrar LESS mediante Javascript, Drupal nos proveé de un módulo que compila nuestro fichero .less con PHP. Solamente nos tenemos que preocupar de que nuestro fichero .less esté correctamente escrito, nuestro Gestor de Contenidos hará el resto.

Para instalar el módulo debemos seguir los siguientes pasos:

• Descargar el módulo desde este enlace: LESS CSS para Drupal
• Descargar el módulo Libraries, que es dependencia del módulo anterior: Libraries para Drupal
• Descargar Lessphp desde este enlace: Lessphp
• Descomprimir el fichero anterior y copiar el fichero less.inc.php dentro de la carpeta sites/all/libraries/lessphp/less.inc.php

Con esto Drupal reconocerá cualquier fichero LESS agregado mediante la funcion drupal_add_css o que tengamos en nuestro fichero .info del theme.

Como excepción tenemos el famoso theme Omega, muy popular por facilitar el Responsive Design y estar, por supuesto, basado en HTML5. Omega debe tener una configuración especial para que se reconozca nuestro fichero .less, que debe ser la siguiente:

• Debemos crear un fichero global.css.less en nuestro theme, esto es fundamental.
• Agregamos el siguiente código en nuestro fichero .info del theme:

• Seleccionamos nuestro fichero .less y Drupal lo reconocerá automáticamente.

Con esto nuestro fichero global.less.css funcionará en nuestro theme Omega.