Édition Nº5 du 12 juin 2012 Retour au sommaire

Bien démarrer avec LESS

Les préprocesseurs CSS sont des outils formidables qui, lorsqu’ils sont bien utilisés, simplifient grandement la conception de feuilles de styles : ils se présentent comme une surcouche permettant de rendre le langage CSS dynamique, grâce à l’ajout de diverses fonctionnalités telles que les variables ou les fonctions.

Conducteur


Corinne Schillinger

Arrêts prévus :

D’un développeur à l’autre le choix du préprocesseur varie : suivant le profil et les affinités de chacun, telle solution peut sembler plus appropriée que telle autre. Cependant, quel que soit l’outil finalement retenu, vient inévitablement ce petit moment de flottement où il faut sauter le pas et commencer à l’utiliser. Or, ce n’est pas toujours facile, faute de ressources appropriées permettant d’en appréhender correctement le fonctionnement.

Cela fait maintenant plus d’un an que je travaille avec LESS. Voici une compilation de ressources qui, je l’espère, devrait vous permettre de commencer à l’utiliser sans difficulté.

Les applications

LESS est un langage qui nécessite d’être compilé pour pouvoir être interprété par les navigateurs. Il existe plusieurs compilateurs disponibles dans différents langages : JavaScript, PHP ou Ruby, pour ne citer que ceux-là.

Cependant ils ne présentent pas tous les même avantages : le compilateur JavaScript est certainement le moyen le plus facile de tester LESS en situation réelle. Mais, il ne doit en aucun cas être utilisé en production côté client 1, pour des questions de performance. En effet, le code est compilé à la volée, ce qui rend impossible toute mise en cache de la feuille de styles et impose au code LESS d’être re-compilé à chaque chargement de page. De plus, si —pour une raison ou pour une autre— le JavaScript n’est pas activé, le code CSS n’est tout simplement pas généré, ce qui a pour conséquence de priver le contenu de toute mise en forme.
L’utilisation du compilateur JS côté serveur est beaucoup moins problématique, puisque le fichier généré peut être mis en cache. Cependant, dans la majeure partie des cas, il est préférable d’éviter au serveur toute tâche inutile en lui livrant directement le code CSS. 2

À la place, il est préférable de se tourner vers une application desktop, qui est sans nul doute la solution la plus simple pour intégrer LESS à la chaîne de développement. Elle compile automatiquement le code CSS et rend son utilisation complètement transparente : le fichier CSS est généré et mis à jour à chaque fois que le fichier LESS est sauvegardé. Pratique, non ?

Fait appréciable, il existe au moins une application pour chaque système d’exploitation :

  • SimpleLESS pour Windows, Mac et Linux.
  • WinLESS pour Windows.
  • LESS.app et Codekit pour Mac. Contrairement aux applications précédemment évoquées, Codekit présente l’avantage de pouvoir compiler plusieurs langages, tels que SASS, Stylus, HAML ou CoffeScript. Le prix de la licence d’utilisation varie entre 20 et 28 $ : à vous d’en estimer sa juste valeur.
  • LiveReload est un bon équivalent à Codekit, dans le sens où il est, lui aussi, capable de compiler plusieurs langages. Son petit “plus” réside dans le confort d’utilisation qu’il offre, puisqu’il met automatiquement la page à jour dans le navigateur : s’il s’agit d’une modification qui impacte le code CSS ou les éléments tiers telles que les images, seuls les composants impactés sont redessinés. À l’inverse pour toutes les autres modifications (HTML, PHP ou JS par exemple), l’ensemble de la page est rafraîchie.
    Pour permettre à Livereload de fonctionner correctement, il suffit d’installer l’une des extensions disponibles, ou d’insérer un petit snippet JavaScript juste avant la balise <body> de la page.
Copie d’écran du site de SimpleLess
SimpleLESS, l’une des rares applications qui soit disponibles sur Windows, Mac et Linux

Ceci étant dit, il me semble important de mentionner que si certaines applications proposent de regrouper la compilation et la minification du code en une seule et même étape, cela n’est pas nécessairement une bonne idée. Il peut, bien souvent, s’avérer utile de faire une passe de vérification et de nettoyage sur le code CSS obtenu : il arrive que certaines portions de code soient inutilement détaillées. Bien sûr, il convient de re-vérifier l’intégralité du fichier à chaque nouvelle compilation, puisque les modifications apportées au code CSS sont écrasées à chaque fois que ce dernier est re-compilé. 3

Le guide de démarrage

Extrait de l’atelier LESS à la Kiwi Party 2011
Extrait de l’atelier LESS à la Kiwi Party 2011

Donné mi-2011 à l’occasion de la Kiwiparty, l’atelier « LESS : moins de CSS, plus de fun ! » a été pensé comme une introduction au langage et à ses subtilités. Le support de présentation n’a pas vocation à être exhaustif sur le sujet, loin de là. Cependant, il met en situation les différentes fonctionnalités de LESS et permet de comprendre rapidement l’intérêt que présente son utilisation.

La documentation officielle

Aperçu du site lesscss.org
Aperçu du site lesscss.org

Agrémenté de nombreux exemples illustrants les différentes possibilités de LESS, le site officiel constitue une excellente source de documentation. Maintenue par le concepteur du langage et mise à jour au gré des versions, elle permet de se tenir informé des évolutions apportées.

La boîte à outils

Extrait du code fourni par lesselements.com
Extrait du code fourni par lesselements.com

LESS Elements est une collection de classes LESS prédéfinies et prêtes à l’emploi. Elle constitue un excellent support pour comprendre et approfondir le mécanisme du préprocesseur. Son principal intérêt est d’inclure, pour chaque classe, l’ensemble des propriétés préfixées adéquates, ce qui permet de simplifier grandement leur mise en place.
Cependant plutôt que de les utiliser telles quelles, il est préférable de s’en inspirer et de les adapter en fonction des besoins réels. Car, suivant les cas, elles peuvent parfois être bien plus verbeuses que nécessaire.

Le service en ligne

Aperçu de l’outil en ligne CSS2LESS
Aperçu de l’outil en ligne CSS2LESS

Cette dernière ressource est un outil qui permet de transformer un code CSS en LESS : CSS2LESS permet de ré-agencer le contenu d’une feuille de styles pour qu’elle adopte le format LESS. Malheureusement cet outil n’est pas magique et atteint bien vite ses limites : il ne prend en charge que la réorganisation du code sous forme de déclarations imbriquées.
Il s’avère donc particulièrement utile dans un contexte donné, qui est la reprise de code en vue d’un passage à LESS.

Voilà, j’espère que ces quelques outils vous permettront de sauter le pas plus facilement.
N’hésitez pas à partager vos ressources !

Notes :

  1. Mise à jour du 19/06/2012
  2. Mise à jour du 19/06/2012
  3. Mise à jour du 19/06/2012
Bien démarrer avec LESS

Note de cet article : 3 / 5

Pour pouvoir noter les articles, vous devez voyager avec un billet (c'est gratuit !).
Toutes les infos sur la page d'abonnement !
Déjà inscrit ? Connectez-vous.

Photo : Thanh Nguyen

C’est au cours de son projet de fin d’études que Corinne découvre les standards du web. Motivée par cette approche qualitative, elle fait une croix sur les tableaux de mise en page et les hacks navigateur. Après quelques années passées à se former en autodidacte, elle se met à son compte en mai 2009 pour pouvoir partager son expertise et devient Expert AccessiWeb en Évaluation. Elle est également l'auteur du livre Intégration web : Les bonnes pratiques publié aux éditions Eyrolles.

Découvrir les autres articles de cet auteur

9 réactions à cet article (RSS)

Manuel Schmalstieg

#1

Merci pour cet article! Cela fait un moment que je considère l’utilisation de LESS (notamment au vu des louanges de Andy Clarke)… sauf que mon éditeur de CSS favori est Espresso, qui n’offre pas de support natif pour LESS (ni SASS).

Ma question donc: quels sont les éditeurs de code que vous utilisez pour écrire vos feuilles de style en LESS? Quels éditeurs « comprennent » les fichiers .less ?

Corinne Schillinger

Corinne Schillinger

#2

C’est une excellente question. :)

Lorsque j’ai commencé à utiliser LESS, aucun éditeur ne supportais le langage.
Je ne sais pas vraiment si les choses ont changé depuis…

Le plus simple est de regarder s’il existe une extension ou un bundle qui permette au langage d’être reconnu. Je sais qu’il en existe pour Textmate, Sublime Text 2 et Coda.
De ce que j’ai vu, il semblerait que ce soit également le cas pour Espresso.

Ceci dit, il est possible de bénéficier de la coloration syntaxique sans installer d’extension : il suffit de demander à l’éditeur d’interpréter le fichier LESS comme s’il s’agissait d’un fichier CSS.
Bien souvent, on peut modifier les préférences du logiciel et ajouter l’extension .less à la liste des fichiers interprétés comme du CSS.

Christophe Andrieu

#3

PhpStorm est plutôt malin pour ça (il comprend les variables, l’héritage, etc.).
PhpStorm est plutôt malin tout court d’ailleurs !

Nicolas Hoizey

#5

Belle introduction à l’utilisation de LESS, je saurais maintenant où envoyer ceux auxquels j’en parle… ;-)

Au niveau de l’utilisation en prod du compilateur JS, je dirais pour compléter qu’il faut préciser en prod côté client — puisqu’on peut l’utiliser aussi côté serveur —, et aussi que cela risque surtout de poser problème en cas de désactivation ou blocage par un proxy du javascript.

Aussi, tu cites LESS.app et Codekit ensembles, ce qui laisse croire que LESS.app est payant comme l’autre, alors qu’il est gratuit, et suffit amplement dans bien des cas.

Je chipote, alors je me permets aussi de dire que la mention du tarif de LiveReload pourrait être nettoyée… ;-)

Quand tu dis qu’une passe de vérification et ménage peut être nécessaire sur le CSS généré, il faudrait alerter sur le fait que ce sera perdu si le LESS est modifié et recompilé.

Alexandre B

#6

@Nicolas Hoizey
Jamais, on ne met un compilateur LESS en prod, ni même le .less, seule la CSS générée doit être en production, sauf cas exceptionnel peut être (démos, etc.)

Enfin pour ma part, c’est ce que je fais, je l’utilise uniquement dans la phase de développement.
Sinon c’est une perte de performance sur une prod.

Nicolas Hoizey

#7

@Alexandre B : on peut mettre en prod si on a un cache, que la CSS n’est recalculée que si le LESS est modifié. Mais je suis d’accord qu’il faut mieux livrer la CSS directement si possible, même si le gain est souvent négligeable.

Corinne Schillinger

Corinne Schillinger

#8

@Nicolas Hoizey : J’ai apporté quelques précisions sur les passages relevés. Ceci dit je confirme : tu pinailles. :p

Nicolas Hoizey

#9

\o/ ;-)

Réagir à cet article

XHTML : Vous pouvez utiliser ces balises : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>