Ni graphiste, ni développeur

Des techniques à mi-chemin entre le graphisme et le développement web

LESS - Tout ce qu'il manquait aux CSS

LESS, mot qui ressemble franchement à un acronyme et qui n'en est pas un, est le nom d'un langage facilitant l'écriture des CSS.

C'est un outil qui me tient à cœur parce qu'il est à mi-chemin entre le graphisme et le développement et c'est là le sujet de ce blog. LESS ajoute aux CSS quelques éléments qui leur font cruellement défaut. En tant que développeur vous aurez accès à des variables, des fonctions, une hiérarchisation des sélecteurs CSS, bref de la structure. Aux graphistes, LESS apportera la cohérence, ce qui ravira tout web designer qui se respecte.

Techniquement, LESS est un pré-processeur. C'est à dire que vous allez écrire en utilisant la syntaxe LESS puis utiliser un outil pour transformer le LESS en CSS classiques. Les navigateurs actuels ne savent pas interpréter LESS nativement. Pour ma part, je travaille avec Visual Studio et l'excellent plugin Web Essentials. Ce dernier rend l’utilisation de LESS absolument transparente : vous écrivez votre fichier .less et à chaque sauvegarde, un fichier css minifié est automatiquement généré. Vous trouverez une liste d'outils pour tous les environnements à la fin de cet article.

En ce qui concerne l'apprentissage de la syntaxe, LESS jouit d'un avantage énorme : un fichier CSS est un fichier LESS. C'est à dire qu'en prenant n'importe quel fichier .css et en le renommant en .less, vous obtenez un fichier LESS au format valide que vous pouvez commencer à modifier pour utiliser les facilités du langage. La migration est donc ultra simple.

Et dans la vraie vie ?

Imaginons le besoin simple suivant. Nous voulons un tableau qui sera identifié par une classe exemple. L'entête du tableau utilisera du texte blanc sur fond bleu (mais on ne sait pas encore précisément lequel), et le texte des lignes du tableau sera du même bleu. Au survol d'une ligne, le fond de cette dernière deviendra bleu clair. Ce bleu clair aura la même teinte que celui de l'entête et sera simplement éclaircie.
Cette demande n'est pas bien compliquée à écrire en CSS mais elle présente les inconvénient suivants :

  • Chaque bloc css doit tenir compte du fait que le tableau parent a une classe ce qui va nous faire des sélecteurs à rallonge du type : table.exemple > thead > tr > th
  • Si on change le bleu de base, il va falloir le redéfinir à plusieurs endroits dans la CSS.
  • Si on veut le survol un peu plus ou un peu moins clair, il va falloir trouver la couleur dans un outil externe (Paint.net, Photoshop…) la copier dans la css et faire cet aller/retour à plusieurs reprises si le résultat dans le navigateur n'est pas celui attendu.

Voici un exemple fonctionnel. Le LESS est consultable dans l'onglet CSS. Le résultat est dans Result. Je vous invite à cliquer sur "Edit in JSFiddle" sur la droite et modifier la valeur de la couleur de base.



Tout est bien rangé, la couleur de base n'est définie qu'à un seul endroit. C'est facile à comprendre et à maintenir.

Cet exemple est trivial mais il est important de comprendre que plus votre site va grossir et plus LESS montrera son bénéfice. D'une part parce que les possibilités offertes sont bien plus nombreuses que ce que montre ce petit exemple. D'autre part parce qu'il est possible d'éclater un document LESS en plusieurs fichiers. Vous pouvez donc créer un fichier contenant toutes les variables de votre site (couleurs, polices, tailles des colonnes, espace entre les colonnes…) et le référencer dans tous vos autres fichiers.

C'est ce qui est fait dans l'incontournable Bootstrap. Si vous l'utilisez, je vous conseille de télécharger la version avec les fichiers LESS qui vous permettra de paramétrer le moindre détail, des couleurs de base jusqu'aux points de rupture des media-queries pour le reponsive design.

Pour aller plus loin

  • Article Wikipédia : En français. C'est une très bonne synthèse des briques importantes de LESS.
  • Site officiel LESS : En anglais. La documentation est claire et complète. Il y a tout ce qu'il faut pour maitriser le sujet.
  • Boostrap : Un framework très populaire pour développer des sites web "responsive" s'adaptant aux différentes tailles d'écran. Pour en apprécier tout le potentiel, mettez les doigts dans les fichiers LESS ! Au passage, ce blog utilise Bootstrap.
  • Vous trouverez une liste d'outils adaptés à votre environnement de développement sur le site officiel : compilateurs LESS en ligne, des outils graphiques pour toutes les plateformes ainsi que des plugins pour les différents IDE.

Commentaires (1) -

  • Benoît

    03/06/2015 18:40:49 | Répondre

    N'hésitez pas à poster vos remarques !

Ajouter un commentaire

Loading