Less Css

Il y a quelques temps, pour un besoin personnel, j’ai utilisé l’excellent Twitter bootstrap. J’y reviendrais sans doute dans un prochain post, mais succinctement, il s’agit d’un bootstrap CSS, c’est-à-dire tout le nécessaire pour partir avec quelque chose de solide lorsque l’on démarre un site ou une application web.

Twitter bootstrap utilise (éventuellement) less. Je voulais faire un article à propos de less, mais Cédric Exbrayat l’a fait avant moi sur son blog. Il retrace parfaitement les principes de cette extension à CSS, je vous invite donc à le lire pour en savoir plus. Pour faire très court, less ajoute au CSS ce qui lui manque depuis toujours : le support de variables, de fonctions, d’imbrications de règles, etc. Le rêve pour tout développeur web qui se respecte !

Une question se pose alors : un fichier .less est un fichier .css enrichi. Mais quel est le niveau de support des IDE ? Regardons ça de plus près pour Eclipse (nous prendrons comme base la version 3.7).

Support natif

Premier test : ouvrons un fichier .less. Eclipse l’ouvre alors comme un fichier texte basique :

Configurons Eclipse pour qu’il assimile les fichiers .less à des fichiers .css. On va donc dans Préférences > General > Editors > File Associations. On y ajoute l’extension .less et on lui associe l’éditeur CSS :

De même, dans Préférences > General > Content Types, nous ajoutons l’extension .less au type CSS :

On ouvre à nouveau le fichier .less, Eclipse le reconnait comme un fichier .css désormais :

C’est déjà mieux, mais on ne bénéficie pas ici de la force de less. Il faut donc passer par un plugin.
Avant toute chose, il est nécessaire d’installer l’extension Xtext sur Eclipse. Une simple recherche sur le Market place, et zou, c’est installé :

Eclipse plugin pour Less

Le plugin Eclipse plugin pour Less est notre premier candidat. On va dans Help > Install New Software, puis on ajoute un nouveau site de mise à jour :

http://www.normalesup.org/~simonet/soft/ow/update/

On installe le plugin. Avant toute chose, il faut penser à supprimer les modifications apportées précédemment (sinon les fichiers .less seront considérés comme de « simples » fichiers .css). L’éditeur fourni avec le plugin permet donc de supporter less :

On le voit sur la capture précédente, l’auto-complétion fonctionne (la variable @linkColor a bien été reconnue). Toutefois, gros hic pour ce plugin, il ne supporte pas les références entre les fichiers (less permet en effet d’inclure des fichiers grâce à la commande @import "mon-fichier.css). Du coup, Twitter Bootstrap n’est pas utilisable en tant que tel avec ce plugin. En effet, ce bootstrap dispose d’un fichier pour les variables, d’un autre pour les mixins, d’un troisième pour les classes des tables, etc. Le plugin déclare alors forfait :

C’est d’ailleurs expliqué sur le site :

The following features are not supported in the editor:
Refactoring,
Cross-references between files.

Plugin LessCss

Testons maintenant le plugin LessCss. Ici, pas encore de site de mise à jour. Il faudra donc passer par la section de téléchargement du site. Nous téléchargeons le ZIP, déposons les .JAR contenus dans le répertoire dropin ou plugins de notre Eclipse, et finissons par le redémarrer…

Ici aussi, le support des fichiers .less est opérationnel. Toutefois, à nouveau, ce plugin nous offre un support partiel. Comme on peut le voir sur la Todo list du plugin, il reste un certain nombre de fonctionnalités à implémenter, en particulier le support du @import. Dommage !

Conclusion

Ces premiers pas à la recherche d’un éditeur solide pour less ne s’avèrent guère concluants : un support natif se limitant au CSS pour Eclipse, et deux plugins loin d’être terminés. Bref, ce n’est pas encore ça, mais gageons que le support de less par Eclipse ira en s’améliorant, tant ce framework gagne des nouveaux adeptes !

N’hésitez pas à faire part de vos trouvailles, ou aussi de votre expérience avec votre propre IDE (NetBeans, IntelliJ, etc.) !

Start Slide Show with PicLens Lite PicLens