LessCSS est un framework simplifiant le travail au niveau CSS, en permettant l’utilisation de variables et fonctions grâce à une compilation javascript.
Très pratique, il fait gagner en lisibilité et en rapidité de développement.

Néanmoins, si pour le développement c’est un réel gain, en production ça l’est beaucoup moins : la feuille de style est interprétée en javascript à chaque affichage de page.

Je vous propose donc ici l’installation et l’utilisation d’un compilateur, permettant une fois vos développements achevés, de compiler vos fichiers less en un css unique, avec en bonus la compression pour un maximum de performances.

Installation de l’outillage

L’installation et l’utilisation suivantes sont pour un système Debian/Ubuntu et nécessite l’ajout de repo tierce, ce qui peut dans certaines entreprises être une contrainte forte.

[info]Comme me l’a fait remarqué Dan Petty, les packages ne sont à ce jour pas disponibles sous ARM.[/info]

# Declaration et ajout des repos pour node et npm
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo add-apt-repository ppa:gias-kay-lee/npm
sudo apt-get update
# Installation de node.js et npm
sudo apt-get install nodejs npm
# Installation du compilateur less
npm install less

Compilation

Une fois l’installation faite, complier son fichier less est très simple :

~/node_modules/less/bin/lessc mon-style.less > mon-style.css

Les fichiers de dépendance de votre fichier less sont pris en compte, et vous obtenez un fichier CSS prêt à l’emploi.

Optimisation

Le fichier CSS généré est une simple interprétation, non compressée. Il peut être intéressant de réaliser la compression du fichier CSS pour augmenter la vitesse de téléchargement de la page. Pour celà, un script maison ou bien des sites web proposent de compresser vos fichiers CSS. Dans un cas d’industrialisation, vous pouvez le faire en ligne de commande (donc ensuite scriptable facilement), par exemple avec YUI compressor, le plus reconnu du marché. Inconvénient : il nécessite l’installation de Java, un peu lourd.

Installez Java si ce n’est pas déjà fait, puis téléchargez la dernière version de YUI compressor sur cette page. Ensuite installez le :

java -jar /path/to/unziped/folder/yuicompressor-x.x.x/build/yuicompressor-x.x.x.jar style.css -o style.compressed.css

En remplacant x.x.x par le numéro de la version que vous aurez téléchargé, style.css étant votre fichier css source et style.compressed.css le fichier compressé de destination.