Le langage Less : présentation et tutoriel

Les personnes qui veulent programmer ou concevoir des pages Web modernes n’échapperont pas à CSS. Ce langage de feuille de style, qui, comme HTML, compte parmi les principaux langages du Web, permet une séparation claire des contenus de leur représentation graphique, et donc d’intervenir à tout moment sur des éléments comme la mise en page, les couleurs ou la typographie, sans avoir à reprendre l’ensemble du code source d’un document. Toutefois, plus un projet Web prend de l’ampleur, plus ses feuilles de style deviennent complexes et peu maniables, tout comme les documents pour lesquels les informations de présentation sont fournies au format CSS, et par conséquent aussi le travail avec le code. L’objet de Less, langage dynamique de génération de CSS, aussi appelé préprocesseur, est de faciliter ce travail.

Less (Leaner Style Sheets) est une extension à compatibilité descendante (ou rétrocompatible), autrement dit un préprocesseur pour le langage de feuille de style CSS. Cela veut dire que tout code CSS est par nature un code compatible avec Less (sans que l’inverse ne soit vrai). L’objet de Less est une plus grande efficacité de l’écriture de code CSS. C’est pourquoi ce langage, influencé par le langage SASS, comporte plusieurs extensions apportées aux instructions CSS normales, comme des variables et des fonctions, qui permettent entre autres une plus grande facilité de gestion des feuilles de style et suppriment les lourdes répétitions de code.

Lorsqu’Alexis Sellier a présenté en 2009 le préprocesseur CSS, ce compilateur pour la conversion de Less en CSS était encore écrit dans le langage de programmation orienté objet Ruby. Depuis, le langage comme le procédé de compilation sont l’outil JavaScript Less.js, qui présente l’avantage d’autoriser la compilation de Less non seulement au niveau du serveur mais aussi chez le client (dans les navigateurs).

Aussi bien CSS que Less appartiennent à la catégorie des langages de feuille de style. Dans les deux cas il s’agit donc de langages formels qui assurent la mise en forme des interfaces utilisateur et des documents. Ce que font les fichiers de feuilles de style, c’est uniquement de faire correspondre les consignes de mise en forme aux éléments HTML d’un site Internet, le navigateur se chargeant des opérations de mise en forme. La différence entre Less et CSS est que CSS est un langage statique alors que Less entre dans la catégorie des langages dynamiques et comporte des fonctionnalités dynamiques comme des variables, des opérateurs, des fonctions, des mixins ou des imbrications qui manquent au CSS.

Alors que le code du CSS exige une structuration fixe, Less offre aux développeurs une bien meilleure flexibilité. On peut par exemple définir des règles individuelles pour toute classe d’éléments, ces règles étant valables pour l’ensemble d’une feuille de style. Cela évite les laborieuses répétitions de code. Cela veut aussi dire que les deux langages présentent des syntaxes différentes. On peut considérer que la syntaxe de Less est une métasyntaxe de CSS, étant donné qu’un code en CSS est toujours un code en Less valide, avec la même sémantique.

Lorsqu’on veut utiliser Less pour un projet, il y a deux possibilités. Soit on utilise le navigateur de son choix pour la compilation des feuilles de style Less côté client, en se servant de Less.js, soit on installe les applications JavaScript sur son ordinateur de développement, et c’est là que le code est converti, par exécution d’une ligne de commande, au moyen de Less.js et de l’environnement d’exécution Java node.js.

L’utilisation de Less côté client est la façon la plus simple et la plus rapide de travailler avec un langage de feuille de style. Toutefois, lorsqu’il s’agit d’affichage de contenus, cette solution est plutôt à déconseiller étant donné que la compilation supplémentaire de Less au format CSS se paie d’une nette dégradation de performance côté utilisateur. Et dans les navigateurs où JavaScript est désactivé, les consignes de mise en forme disparaitraient même complètement.

Pour compiler Less dans le navigateur, il faut d’abord indiquer dans le document qu’il y a des feuilles de style Less qui s’appliquent (c’est-à-dire des feuilles de style dont l’extension est .less). Le lien entre les feuilles de style et le document se fait au moyen de l’attribut rel « stylesheet/less » :

Ensuite, télécharger la version en vigueur de Less.js, qu’on peut trouver par exemple dans le répertoire GitHub officiel du préprocesseur CSS. L’outil JavaScript est ensuite à inclure dans l’en-tête <head> de votre projet :

Less s’installe tout aussi rapidement sur l’ordinateur de développement, et est tout aussi facile à utiliser. Il n’y a pas de contraintes côté système d’exploitation, le préprocesseur CSS fonctionnant indifféremment sous Windows, mac OS et UNIX/Linux, à la seule condition, déjà mentionnée, que l’environnement d’exécution Java node.js ait été installé au préalable.

À partir de ce moment les feuilles de style qui ont été élaborées peuvent être compilées à tout moment, au moyen d’une ligne de commande là aussi. Par exemple le fichier exemple.less peut se transformer en fichier CSS au moyen de la ligne de commande suivante :

Cela vaut la peine de se familiariser avec Less pour quiconque a régulièrement affaire avec du CSS. L’utilisation de Less n’a pas seulement l’avantage de rendre ses feuilles de style dynamiques, mais également celui de faire gagner beaucoup de temps et de travail. Il faut naturellement d’abord assimiler les particularités de cette extension du langage CSS, car l’écriture de feuilles de style en Less nécessite de connaître les principes de sa syntaxe. Dans le cadre de ce petit cours nous vous présentons à l’aide d’exemples pratiques les principales caractéristiques de la paire Less CSS, y compris leurs notations.

L’un des principaux points forts de Less est la possibilité de définir des variables, comme dans d’autres langages de programmation. Ces variables peuvent concerner tous types de valeurs, sachant qu’il est surtout intéressant d’avoir des variables pour des valeurs d’utilisation très fréquente dans la feuille de style. C’est ainsi qu’on s’intéresse principalement aux variables pour les éléments les plus utilisés comme les couleurs, les polices, les dimensions (taille, hauteur, largeur), les sélecteurs ou les URL, ainsi que leurs variantes (p. ex. plus clair/plus foncé, etc.). Les valeurs définies peuvent ensuite s’appliquer partout dans la feuille de style, grâce à quoi des modifications portant sur l’ensemble d’un document ne nécessitent que la modification d’une unique ligne de code.

Dans l’extrait de code ci-dessous, il est défini deux variables, l’une pour la couleur d’arrière-plan (@background-color) et l’autre pour la couleur de texte (@text-color). Les deux contiennent du code hexadécimal :

La couleur d’arrière-plan, ici du blanc, s’applique aussi bien aux blocs de texte ordinaires (p) qu’aux listes de rang inférieur (ul). La couleur du texte est le noir, s’appliquant au texte dans les blocs de texte comme à celui des listes (li).
Si l’on veut procéder à des modifications, par exemple avoir du texte blanc sur un fond noir pour les listes et les paragraphes de texte, il suffit d’inverser les valeurs des deux variables, alors que dans une feuille de style en langage CSS ordinaire il faudrait inverser ces valeurs pour toutes leurs occurrences. Après compilation en CSS, le code se présente comme suit :

Le principe des mixins se rapproche de celui des variables, à la différence que ce ne sont pas des valeurs individuelles mais des classes entières qui sont définies, y compris les valeurs individuelles définies pour chaque classe. Cela permet d’embarquer dans les feuilles de style Less les propriétés d’une classe dans une autre classe. Par ailleurs les mixins peuvent aussi se comporter comme des fonctions et accepter des paramètres (y compris avec des valeurs par défaut). Dans l’exemple ci-dessous les coins arrondis (.rounded-corners) s’appliquent aussi bien à la première (#header) qu’à la dernière ligne (#footer) de la page, avec pour l’en-tête la reprise de la valeur définie mais pour le pied de page une valeur propre (dix pixels) :

Voici ce que cela donne pour le CSS compilé à partir de ces lignes de code en Less :

En langage CSS, la création d’héritages nécessite l’écriture de très longs sélecteurs. Less permet l’imbrication d’un nombre quelconque de sélecteurs les uns dans les autres, ce qui d’une part se fait beaucoup plus facilement, et d’autre part donne aux feuilles de style une structure plus claire et plus compréhensible. Voici un exemple d’imbrication :

Ici on a donc réuni dans la feuille de style Less les sélecteurs p, a et :hover, ce qui représente une simplification considérable par rapport à une feuille de style CSS, comme on le voit dans le CSS généré dans l’exemple ci-dessous :

Les feuilles de style Less permettent également d’effectuer les quatre opérations addition (+), soustraction (-), multiplication (*) et division (/) par application d’un opérateur à toute valeur numérique ou à toute valeur de couleur. On peut ainsi très simplement créer des relations complexes entre des valeurs de différents éléments, ces relations continuant de s’appliquer lorsque les valeurs de base sont modifiées. Si l’exécution d’un opérateur est impossible ou ne rime à rien, elle est automatiquement ignorée, par exemple s’il fallait additionner une valeur en centimètres et une valeur en pixels. L’exemple ci-dessous montre les possibilités de Less en matière d’opérations :

La définition de base pour les bordures (d’une largeur de 1 pixel) et pour la couleur de base (#111), qui correspond à une valeur de noir, s’applique ainsi aussi bien à l’en-tête qu’au pied de page, avec trois opérateurs à l’œuvre pour traiter les valeurs de base :

1. la couleur de base de l’en-tête est multipliée par 3, donnant la valeur hexadécimale #333, qui correspond à un gris foncé ;
2. à la bordure droite de l’en-tête s’applique l’opérateur de multiplication * 2, lui donnant une largeur double de la largeur standard, soit 2 pixels ;
3. la couleur de base du pied de page est elle aussi traitée par un opérateur, avec ajout de la valeur hexadécimale #003300 à la valeur de base #111, donnant au pied de page la couleur vert foncé #114411.

Voici ce que cela donne dans le code CSS après compilation :

Less apporte également au langage CSS toute la gamme des fonctions. Une feuille de style Less permet ainsi la représentation de relations logiques complexes, avec les fonctions SI ou booléennes, ou bien des fonctions de calcul mathématique aussi complexes que sinus, cosinus ou tangente.
On peut aussi utiliser des fonctions simples pour l’application rapide de définitions de couleur de type rgb, rgba, hsv, etc., ou des fonctions avec des opérateurs de couleur comme le contraste, la saturation (plus saturé/moins saturé) ou la luminosité (plus clair/plus sombre). Pour augmenter ou diminuer la saturation d’un élément par exemple, il suffit de l’indication de la couleur et de la fonction saturate, la valeur de saturation étant donnée en pourcentage, de 0 à 100 % :

Dans cet exemple on a défini dans la feuille de style Less un rouge foncé de valeur hexadécimale #842210 pour l’en-tête et le pied de page, avec toutefois une saturation supérieure de 20 % pour l’en-tête et une saturation inférieure de 10 % pour le pied de page. Dans la feuille de style compilée en CSS, les fonctions comme la variable de couleur (@red) sont compilées et apparaissent sous forme hexadécimale uniquement pour chaque niveau de saturation :

Ce petit tutoriel introductif sur Less ne donne qu’un faible aperçu des possibilités qui rendent ce préprocesseur de CSS si utile. Une fois des variables, des mixins, etc., définis, ils peuvent s’appliquer à tout moment à de nouveaux éléments d’une feuille de style sans avoir à recommencer à zéro comme c’est souvent le cas pour les programmes en CSS. Une modification d’une couleur de base par exemple se fait dans un document Less qui fonctionne en très peu d’étapes très simples, ce qui fait du préprocesseur de CSS un outil des plus utile en particulier pour la gestion des projets Web au long cours.