En este post, vamos a revisar los pasos que hay que seguir, para poder utilizar el preprocesador de estilos LESS de manera cómoda, con el IDE Netbeans 8, y bajo el sistema operativo Windows 7. Pero antes de empezar, quiero explicar muy brevemente qué es LESS y qué ventajas tiene.
LESS es un lenguaje de hojas de estilo, muy completo y muy limpio que resulta casi obligatorio cuando se desarrollan proyectos grandes, ya que permite estructurar el código mucho mejor que el simple CSS.
El problema es que los navegadores no son capaces de entenderlo directamente, por lo que hay que recurrir a un compilador que lo traduzca. La forma de hacer esto puede variar mucho dependiendo de qué entorno de desarrollo estemos usando, qué lenguaje de programación hayamos elegido, o simplemente, qué método nos guste más. Incluso existe la posibilidad de que la compilación se realice en el lado del cliente mediante una librería Javascript. (Nota: el uso de la compilación sobre la marcha con Javascript, está totalmente desaconsejado, excepto para entornos de desarrollo)
Dicho esto, yo he elegido la opción de que sea Netbeans quien haga la compilación de forma automática cada vez que cambie (y guarde) alguno de mis archivos less. Al compilarse, estos archivos se convertirán en los archivos css que podré incluir en el proyecto. En realidad, esta tarea no la hará realmente Netbeans, lo hará una aplicación externa que está hecha en Javascript y que se ejecutará gracias a NodeJS, por lo que nuestro primer paso será descargar NodeJS.
Empezamos…
1.- Descargar e instalar NodeJS
Evidentemente si ya lo tienes instalado, puedes saltarte el paso. Si no lo tienes, ve a su página oficial nodejs.org, descárgalo e instálalo. Confiaré en que no surgirá ningún problema en este paso.
2.- Usar NPM para descargar «less»
NodeJS viene con un gestor de paquetes llamado NPM (Node Package Manager) que es el que vamos a usar para instalar el compilador de LESS. Para eso, abre una ventana de DOS (puedes hacerlo rápido pulsando [win]+r, luego escribe «cmd» y pulsa enter), y escribe lo siguiente:
npm install -g less
El -g sirve para instalar la aplicación ‘less‘ de forma global.
3.- Preguntar dónde se ha instalado
Para saber dónde se ha instalado la aplicación, vamos a preguntar por el archivo ejecutable usando el comando «where». En la misma ventana de DOS ponemos:
where lessc.cmd
Copiamos la ruta completa a este archivo, porque nos hará falta luego.
4.- Configuración general de Netbeans
Lo ideal sería abrir Netbeans ahora, porque si ya estaba abierto cuando se instaló NodeJS, es posible que no se haya enterado de sus rutas de acceso. Si te surge algún problema con las rutas, ten eso en cuenta.
Vamos a Tools > Options > Miscellaneous > CSS Preprocessors.
Ahí podemos pedirle que busque la ruta a LESS, pero si no funciona, podemos pegar la ruta que copiamos antes y pulsar en Ok.
5.- Señalar qué proyecto va a usar LESS
Ahora mismo Netbeans, ya está configurado para poder compilar archivos less. Pero tenemos que decirle en qué proyecto queremos que se ocupe de hacerlo de forma automática.
Para eso, hacemos click derecho en el proyecto que nos interese y pulsamos en: properties > CSS Preprocessors > LESS y marcamos la casilla de «Compile LESS Files on Save«.
Además tendremos que indicar qué carpetas contienen los archivos less y en qué carpetas deben compilarse los archivos css.
Por último, también podemos añadir una cosa más, si ponemos «–compress» o «–x» (es lo mismo) en el campo «Compiler Options«, conseguiremos que además de compilar, también se eliminen espacios y cosas innecesarias para que los archivos sean menos pesados.
Hasta aquí tenemos resuelto el problema, pero podemos ir un poquito más allá. Si nos fijamos bien, al añadir la opción de compresión en el paso anterior, nos aparece un «warning«, que nos avisa de que esta opción está «deprecated» y nos recomienda que usemos mejor un plugin llamado «less-plugin-clean-css«. Este plugin, nos dará más opciones para comprimir y optimizar nuestro código CSS generado, y si queremos usarlo podemos seguir los siguientes pasos.
6.- Instalar el plugin «less-plugin-clean-css»
Necesitamos ir de nuevo a la consola y escribir esta vez:
npm install -g less-plugin-clean-css
De nuevo usamos la opción -g para instalarlo como global.
7.- Opciones de compilación para usar «clean-css»
Vamos otra vez a las propiedades del proyecto, click derecho > properties > CSS Preprocessors > LESS y rellenamos las «Compiler options» con esto:
–clean-css=»–s1 –advanced –compatibility=ie8″
Este plugin tiene muchas opciones que pueden encontrarse en:
https://github.com/less/less-plugin-clean-css
Pero concretamente lo que hemos puesto sirve para lo siguiente:
–s1 Elimina todos los comentarios excepto el primero (suele ser copyrights etc)
–advanced Deshabilita algunas optimizaciones que podrían dar problemas en navegadores antiguos
–compatibility=ie8 Activa la compatibilidad con Internet Explorer 8
Ahora sí que tenemos todo preparado para funcionar. Mi consejo es tener dos carpetas dentro del proyecto, una /css y otra /less (esto es lo que aparece por defecto en la configuración). Dentro de la carpeta /less es recomendable tener una estructura ordenada, porque entre las ventajas de usar LESS, está la posibilidad de usar extends, namespaces y mixins (entre otras cosas), que es recomendable separar en archivos distintos que sean pequeños y manejables, y después unirlos todos usando @includes.
Un último comentario que me gustaría hacer, es que, como desarrollador, utilizo a menudo las «developer tools» de los navegadores para buscar errores de CSS y saber qué línea debo tocar para arreglarlo. Con LESS tenía el miedo de que por compilar los archivos CSS iba a perder la información sobre qué línea de qué archivo debía editar. Pues no hay que preocuparse. Resulta que cuando se compilan los archivos, también se generan archivos map que conservan la información sobre dónde están las reglas de estilo, de manera que las «developer tools» te informan de qué línea debes editar del archivo less, y no del archivo css que sería de poca utilidad.
