Le langage Less : pré­sen­ta­tion et tutoriel

Les personnes qui veulent pro­gram­mer ou concevoir des pages Web modernes n’échap­pe­ront pas à CSS. Ce langage de feuille de style, qui, comme HTML, compte parmi les prin­ci­paux langages du Web, permet une sé­pa­ra­tion claire des contenus de leur re­pré­sen­ta­tion graphique, et donc d’in­ter­ve­nir à tout moment sur des éléments comme la mise en page, les couleurs ou la ty­po­gra­phie, 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 de­vien­nent complexes et peu maniables, tout comme les documents pour lesquels les in­for­ma­tions de pré­sen­ta­tion sont fournies au format CSS, et par con­sé­quent aussi le travail avec le code. L’objet de Less, langage dynamique de gé­né­ra­tion de CSS, aussi appelé pré­pro­ces­seur, est de faciliter ce travail.

Less (Leaner Style Sheets) est une extension à com­pa­ti­bi­lité des­cen­dante (ou ré­tro­com­pa­tible), autrement dit un pré­pro­ces­seur pour le langage de feuille de style CSS. Cela veut dire que tout code CSS est par nature un code com­pa­tible avec Less (sans que l’inverse ne soit vrai). L’objet de Less est une plus grande ef­fi­ca­cité de l’écriture de code CSS. C’est pourquoi ce langage, influencé par le langage SASS, comporte plusieurs ex­ten­sions apportées aux ins­truc­tions CSS normales, comme des variables et des fonctions, qui per­met­tent entre autres une plus grande facilité de gestion des feuilles de style et sup­pri­ment les lourdes ré­pé­ti­tions de code.

Lorsqu’Alexis Sellier a présenté en 2009 le pré­pro­ces­seur CSS, ce com­pi­la­teur pour la con­ver­sion de Less en CSS était encore écrit dans le langage de pro­gram­ma­tion orienté objet Ruby. Depuis, le langage comme le procédé de com­pi­la­tion sont l’outil Ja­vaS­cript Less.js, qui présente l’avantage d’autoriser la com­pi­la­tion de Less non seulement au niveau du serveur mais aussi chez le client (dans les na­vi­ga­teurs).

Aussi bien CSS que Less ap­par­tien­nent à 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 in­ter­faces uti­li­sa­teur et des documents. Ce que font les fichiers de feuilles de style, c’est uni­que­ment de faire cor­res­pondre les consignes de mise en forme aux éléments HTML d’un site Internet, le na­vi­ga­teur se chargeant des opé­ra­tions de mise en forme. La dif­fé­rence entre Less et CSS est que CSS est un langage statique alors que Less entre dans la catégorie des langages dy­na­miques et comporte des fonc­tion­na­li­tés dy­na­miques comme des variables, des opé­ra­teurs, des fonctions, des mixins ou des im­bri­ca­tions qui manquent au CSS.

Alors que le code du CSS exige une struc­tu­ra­tion fixe, Less offre aux dé­ve­lop­peurs une bien meilleure flexi­bi­lité. On peut par exemple définir des règles in­di­vi­duelles pour toute classe d’éléments, ces règles étant valables pour l’ensemble d’une feuille de style. Cela évite les la­bo­rieuses ré­pé­ti­tions de code. Cela veut aussi dire que les deux langages pré­sen­tent des syntaxes dif­fé­rentes. On peut con­si­dé­rer que la syntaxe de Less est une mé­ta­syn­taxe de CSS, étant donné qu’un code en CSS est toujours un code en Less valide, avec la même sé­man­tique.

Lorsqu’on veut utiliser Less pour un projet, il y a deux pos­si­bi­li­tés. Soit on utilise le na­vi­ga­teur de son choix pour la com­pi­la­tion des feuilles de style Less côté client, en se servant de Less.js, soit on installe les ap­pli­ca­tions Ja­vaS­cript sur son or­di­na­teur de dé­ve­lop­pe­ment, 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’en­vi­ron­ne­ment d’exécution Java node.js.

L’uti­li­sa­tion de Less côté client est la façon la plus simple et la plus rapide de tra­vail­ler avec un langage de feuille de style. Toutefois, lorsqu’il s’agit d’affichage de contenus, cette solution est plutôt à dé­con­seil­ler étant donné que la com­pi­la­tion sup­plé­men­taire de Less au format CSS se paie d’une nette dé­gra­da­tion de per­for­mance côté uti­li­sa­teur. Et dans les na­vi­ga­teurs où Ja­vaS­cript est désactivé, les consignes de mise en forme dis­pa­rai­traient même com­plè­te­ment.

Pour compiler Less dans le na­vi­ga­teur, il faut d’abord indiquer dans le document qu’il y a des feuilles de style Less qui s’ap­pli­quent (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 « sty­le­sheet/less » :

Ensuite, té­lé­char­ger la version en vigueur de Less.js, qu’on peut trouver par exemple dans le ré­per­toire GitHub officiel du pré­pro­ces­seur CSS. L’outil Ja­vaS­cript est ensuite à inclure dans l’en-tête <head> de votre projet :

Less s’installe tout aussi ra­pi­de­ment sur l’or­di­na­teur de dé­ve­lop­pe­ment, et est tout aussi facile à utiliser. Il n’y a pas de con­traintes côté système d’ex­ploi­ta­tion, le pré­pro­ces­seur CSS fonc­tion­nant in­dif­fé­rem­ment sous Windows, mac OS et UNIX/Linux, à la seule condition, déjà men­tion­née, que l’en­vi­ron­ne­ment 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 trans­for­mer en fichier CSS au moyen de la ligne de commande suivante :

Cela vaut la peine de se fa­mi­lia­ri­ser avec Less pour quiconque a ré­gu­liè­re­ment affaire avec du CSS. L’uti­li­sa­tion de Less n’a pas seulement l’avantage de rendre ses feuilles de style dy­na­miques, mais également celui de faire gagner beaucoup de temps et de travail. Il faut na­tu­rel­le­ment d’abord assimiler les par­ti­cu­la­ri­té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é­sen­tons à l’aide d’exemples pratiques les prin­ci­pales ca­rac­té­ris­tiques de la paire Less CSS, y compris leurs notations.

L’un des prin­ci­paux points forts de Less est la pos­si­bi­lité de définir des variables, comme dans d’autres langages de pro­gram­ma­tion. Ces variables peuvent concerner tous types de valeurs, sachant qu’il est surtout in­té­res­sant d’avoir des variables pour des valeurs d’uti­li­sa­tion très fréquente dans la feuille de style. C’est ainsi qu’on s’intéresse prin­ci­pa­le­ment aux variables pour les éléments les plus utilisés comme les couleurs, les polices, les di­men­sions (taille, hauteur, largeur), les sé­lec­teurs 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 mo­di­fi­ca­tions portant sur l’ensemble d’un document ne né­ces­si­tent que la mo­di­fi­ca­tion 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 (@back­ground-color) et l’autre pour la couleur de texte (@text-color). Les deux con­tien­nent du code hexa­dé­ci­mal :

La couleur d’arrière-plan, ici du blanc, s’applique aussi bien aux blocs de texte or­di­naires (p) qu’aux listes de rang inférieur (ul). La couleur du texte est le noir, s’ap­pli­quant au texte dans les blocs de texte comme à celui des listes (li).
Si l’on veut procéder à des mo­di­fi­ca­tions, par exemple avoir du texte blanc sur un fond noir pour les listes et les pa­ra­graphes 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 oc­cur­rences. Après com­pi­la­tion en CSS, le code se présente comme suit :

Le principe des mixins se rapproche de celui des variables, à la dif­fé­rence que ce ne sont pas des valeurs in­di­vi­duelles mais des classes entières qui sont définies, y compris les valeurs in­di­vi­duelles définies pour chaque classe. Cela permet d’embarquer dans les feuilles de style Less les pro­prié­tés d’une classe dans une autre classe. Par ailleurs les mixins peuvent aussi se comporter comme des fonctions et accepter des pa­ra­mètres (y compris avec des valeurs par défaut). Dans l’exemple ci-dessous les coins arrondis (.rounded-corners) s’ap­pli­quent 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é­lec­teurs. Less permet l’im­bri­ca­tion d’un nombre quel­conque de sé­lec­teurs les uns dans les autres, ce qui d’une part se fait beaucoup plus fa­ci­le­ment, et d’autre part donne aux feuilles de style une structure plus claire et plus com­pré­hen­sible. Voici un exemple d’im­bri­ca­tion :

Ici on a donc réuni dans la feuille de style Less les sé­lec­teurs p, a et :hover, ce qui re­pré­sente une sim­pli­fi­ca­tion con­si­dé­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 per­met­tent également d’effectuer les quatre opé­ra­tions addition (+), sous­trac­tion (-), mul­ti­pli­ca­tion (*) et division (/) par ap­pli­ca­tion d’un opérateur à toute valeur numérique ou à toute valeur de couleur. On peut ainsi très sim­ple­ment créer des relations complexes entre des valeurs de dif­fé­rents éléments, ces relations con­ti­nuant de s’appliquer lorsque les valeurs de base sont modifiées. Si l’exécution d’un opérateur est im­pos­sible ou ne rime à rien, elle est au­to­ma­ti­que­ment ignorée, par exemple s’il fallait ad­di­tion­ner une valeur en cen­ti­mètres et une valeur en pixels. L’exemple ci-dessous montre les pos­si­bi­li­tés de Less en matière d’opé­ra­tions :

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

1. la couleur de base de l’en-tête est mul­ti­pliée par 3, donnant la valeur hexa­dé­ci­male #333, qui cor­res­pond à un gris foncé ;
2. à la bordure droite de l’en-tête s’applique l’opérateur de mul­ti­pli­ca­tion * 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 hexa­dé­ci­male #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 com­pi­la­tion :

Less apporte également au langage CSS toute la gamme des fonctions. Une feuille de style Less permet ainsi la re­pré­sen­ta­tion de relations logiques complexes, avec les fonctions SI ou boo­léennes, ou bien des fonctions de calcul ma­thé­ma­tique aussi complexes que sinus, cosinus ou tangente.
On peut aussi utiliser des fonctions simples pour l’ap­pli­ca­tion rapide de dé­fi­ni­tions de couleur de type rgb, rgba, hsv, etc., ou des fonctions avec des opé­ra­teurs de couleur comme le contraste, la sa­tu­ra­tion (plus saturé/moins saturé) ou la lu­mi­no­sité (plus clair/plus sombre). Pour augmenter ou diminuer la sa­tu­ra­tion d’un élément par exemple, il suffit de l’in­di­ca­tion de la couleur et de la fonction saturate, la valeur de sa­tu­ra­tion étant donnée en pour­cen­tage, de 0 à 100 % :

Dans cet exemple on a défini dans la feuille de style Less un rouge foncé de valeur hexa­dé­ci­male #842210 pour l’en-tête et le pied de page, avec toutefois une sa­tu­ra­tion su­pé­rieure de 20 % pour l’en-tête et une sa­tu­ra­tion in­fé­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 ap­pa­rais­sent sous forme hexa­dé­ci­male uni­que­ment pour chaque niveau de sa­tu­ra­tion :

Ce petit tutoriel in­tro­duc­tif sur Less ne donne qu’un faible aperçu des pos­si­bi­li­tés qui rendent ce pré­pro­ces­seur 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 à re­com­men­cer à zéro comme c’est souvent le cas pour les pro­grammes en CSS. Une mo­di­fi­ca­tion d’une couleur de base par exemple se fait dans un document Less qui fonc­tionne en très peu d’étapes très simples, ce qui fait du pré­pro­ces­seur de CSS un outil des plus utile en par­ti­cu­lier pour la gestion des projets Web au long cours.