Less es un compilador de css que extiende el lenguaje para agregarle variables, mixins, operaciones aritméticas y funciones. Less puede precompilarse a css o compilar en tiempo real desde el navegador usando less.js.
El uso de less simplifica muchísimo el manejo de los archivos de estilo haciendo más rápido y prolijo la generación de los mismos, pero todo tiene sus contrapartes. Una de ellas es que el browser no tiene idea como interpretar la sintaxis de un archivo .less y por eso, como comente al principio, se deben precompilar para transformarlos en algo que pueda comprender el navegador (es decir convertirlos a .css tradicional).
Esta precompilación puede hacerla directamente el navegador o ser realizada manualmente por nosotros. En el primer caso la magia la realiza el script less.js. De esta forma cada vez que recargan la página el navegador recompila todo (después veremos que no siempre es así) y lo convierte a .css embebido dentro de nuestro html. Para usar less.js tenemos que agregar estas líneas dentro de
<link rel="stylesheet/less" href="less/style.less">
<script type='text/javascript' src='js/libs/less-1.3.0.js?ver=1.3.0'></script> En el segundo caso ocurre algo parecido con la diferencia que somos nosotros quienes decidimos en que momento transformar de .less a .css. Como es de esperar el proceso de compilación va a generar un archivo .css el cual se referenciará en forma tradicional en nuestro código. Para instalar el binario que compila .less podemos usar npm (el administrador de paquetes de node.js)
Y para compilar:
# lessc less/style.less > css/style.css
Pero ahora supongamos que trabajamos Firebug para, entre otras cosas, ajustar detalles en nuestros estilos. Firebug va a poder mostrarnos todos los estilos que usamos en nuestro sitio pero vamos a perder la referencia al archivo en el que se definió cada estilo.
Si trabajamos con un único archivo .less no tendremos mucho problema, pero si por el contrario nuestro proyecto utiliza muchos archivos .less (algo lógico para mejorar la legibilidad y la estructura de estilos) la pérdida de referencia tiene un impacto mucho mayor y evidentemente no va a ser sencillo relacionar un estilo en el .css (sin importar si fue compilado en tiempo real o manualmente) con su definición original en los archivos .less.
A modo de ejemplo el excelente proyecto Twitter Bootsrtap, cuenta con casi 50 archivos .less. Imaginen querer encontrar la definición de un estilo en los .less luego de la compilación.
Pero por suerte Simone Deponti creo un plugin de Firebug llamado Fireless para poder mantener la referencia al archivio .less original.
El plugin requiere una versión modificada de less.js ya que tiene que agregar información de debug (precisamente las referencias a los archivos .less originales en cada definición de estilo) y hasta el momento la gente de Less.js no acepto el pull request para incorporar los cambios realizados por Simone.
Ahora es cuestión de clonar el repositorio de less.js con los cambios y:
# git clone https://github.com/simonedeponti/less.js.git
# cd less.js
# make less
dist/less-1.3.0.js built.
Luego nos queda copiar el .js generado dentro de nuestro proyecto y comenzar a usarlo.
Y ahora un par mas de aclaraciones, cuando less.js se usa en un entorno productivo usa local storage (si esta presente en el browser) para cachear los css generados, por el contrario si se lo utiliza en un entorno de desarrollo less.js no va a cachear los css y por lo tanto cada recarga de la página va a regenerar nuevamente los css.
El tema es que quien decide si estamos en producción o no es less.js y no siempre puede adivinar bien, miren sino dentro de less-1.3.0.js:
var isFileProtocol = (location.protocol === 'file:' ||
location.protocol === 'chrome:' ||
location.protocol === 'chrome-extension:' ||
location.protocol === 'resource:');
less.env = less.env || (location.hostname == '127.0.0.1' ||
location.hostname == '0.0.0.0' ||
location.hostname == 'localhost' ||
location.port.length > 0 ||
isFileProtocol ? 'development'
: 'production');
Les aconsejo que agreguen a less.env las ips o nombres de sus servidores de desarrollo.
Y lo otro a decirles es que traten de no usar less.js en producción, mejor precompilen los css y si pueden los minimizan con
# lessc [-x|--yui-compress] path/style.less
Disfruten.
