Préprocesser le CSS avec LESS

Produire et maintenir du code CSS peut rapidement devenir très compliqué quand votre application Web prends de l’ampleur. A la manière de TypeScript pour le JavaScript, il existe des langages pour le CSS qui permettent de simplifier la maintenance du code. LESS en est l’un d’eux.

LESS (pour Leaner Style Sheets) est une extension du langage CSS permettant de générer dynamiquement des feuilles de style via un code de programmation proche du CSS. LESS ajoute ainsi tout un tas de notion qui fait cruellement défaut au CSS comme la gestion de variables, de fonctions, de calculs arithmétiques pouvant être pilotés par des conditions ou des boucles. Il permet de clarifier le code en apportant la notion d’imbrication à la place ou en combinaison de la méthode en cascade classique du CSS, proposant un code plus concis et imitant la structure de la page HTML cible.

Pour reprendre la documentation LESS, prenez le code CSS suivant :

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

En LESS, vous pouvez écrire la même chose de cette manière :

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

L’imbrication rends tout de suite le code nettement plus lisible et plus proche de la structure de la page Web. Mais nous allons voir que LESS proposent des options d’imbrication encore plus poussées.

Certains Framework comme vue.js proposent déjà d’écrire le code CSS au format LESS directement dans les templates HTML.

Installation

Pour que votre code LESS soit compris par le navigateur Web, il y a une phase de préprocessing qui consiste à transformer le code LESS en code CSS valide, lisible par le navigateur. Il existe plusieurs manières d’utiliser LESS au sein d’une page Web.

L’une d’elle permet d’utiliser une librairie JavaScript dans votre page HTML (éventuellement fournis par un CDN ou en local sur votre machine) et de créer un lien vers votre fichier LESS de la même manière que pour une feuille de style classique. Cependant cette méthode aura pour effet d’allonger les traitements et le rendu de votre page Web à cause du préprocessing exercé par la librairie JavaScript.

<script src="https://cdn.jsdelivr.net/npm/less@4.1.1"></script>

Ci-dessus le lien vers la librairie LESS sur le CDN de jsdelivr. Celui-ci peut-être inclus dans le tag <head> ou avant la fermeture du tag <body> de votre page HTML.

<link rel="stylesheet/less" type="text/css" href="styles.less" />

N’oubliez pas de lier votre feuille .less en précisant l’attribut rel sur stylesheet/less.

L’autre méthode consiste à passer éventuellement sur l’environnement de développement node.js et d’utiliser des commandes shell pour générer en amont les feuilles CSS à intégrer dans la page.

Si vous n’êtes pas familiarisé à l’environnement node.js, je vous invite à lire l’article :
Initialiser un projet Node.js sous TypeScript et ESLint.

Premier point, installer la dernière version du compilateur LESS dans votre projet.

npm i -D less

Il faut ensuite ajouter un script qui effectuera le préprocessing du code :

"scripts": {
  [...]
  "css:less": "lessc styles.less styles.css",
}

L’avantage de cette méthode est que le compilateur embarqué vous indiquera les erreurs que vous avez éventuellement réalisé dans votre code LESS / CSS lors de l’exécution de la commande shell.

Le compilateur LESS ne permet pas cependant de composer avec des dossiers et d’effectuer des tâches groupées. Heureusement il existe des librairies s’appuyant sur le compilateur lessc qui le font très bien comme less-watch-compiler :

npm i -D less less-watch-compiler

Il suffit ensuite de modifier le script de cette manière :

"scripts": {
  [...]
  "css:less": "less-watch-compiler --run-once src dist",
}

On indique à notre compilateur que les fichiers .less sont disponibles dans le dossier src et que les feuilles CSS générées doivent être déposées dans le dossier dist. Le nom des dossiers reste une convention utilisée généralement par les développeurs Web mais vous pouvez très bien en changer. L’option --run-once indique simplement qu’on ne souhaite effectuer cette tâche qu’une seule fois. less-watch-compiler a en plus la particularité de contrôler si un fichier .less a été modifié et peut le préprocesser à la volée. Cela évite d’avoir à relancer la commande de préprocessing pour contrôler le rendu.

Utilisation

Maintenant que LESS est installé dans votre projet Web, il ne reste plus qu’à écrire les feuilles de styles en LESS. Le code est très proche du CSS, et si vous êtes familiarisé avec d’autres langages de développement, son apprentissage devrait être assez facile.

Variables

Comme cité précédemment, LESS apporte plusieurs notions qui faisaient défaut au CSS comme la possibilité de créer des variables. Vous pouvez ainsi contrôler des valeurs depuis un seul emplacement.

@smartphone: ~"only screen and (max-width: 30em)";
@tablette: ~"only screen and (min-width: 30em) and (max-width: 50em)";
@laptop: ~"only screen and (min-width: 50em)";
body {
  background-color: purple;  
  @media @smartphone {
    background-color: white;
  }
  @media @tablette {
    background-color: red;
  }
  @media @laptop {
    background-color: black;
  }
}
body {
  background-color: purple;
}
@media only screen and (max-width: 30em) {
  body {
    background-color: white;
  }
}
@media only screen and (min-width: 30em) and (max-width: 50em) {
  body {
    background-color: red;
  }
}
@media only screen and (min-width: 50em) {
  body {
    background-color: black;
  }
}

Fonctions

LESS propose tout un ensemble de fonctions permettant des traitements sur les chaînes, d’effectuer des opérations arithmétiques ou logiques, de modifier les couleurs. N’hésitez pas à consulter la documentation LESS pour connaître l’ensemble des fonctions disponibles.

@bg: black;
@bg-light: boolean(luma(@bg) > 50%);
div {
  background: @bg; 
  color: if(@bg-light, black, white);
}
div {
  background: black;
  color: white;
}

Mixins

Autre point fort de LESS, l’utilisation des mixins qui permet d’inclure une classe dans une autre. C’est aussi un moyen de créer ses propres fonctions, pouvant même être appelées récursivement pour générer du CSS. Et si vous ne souhaitez pas que votre mixins apparaisse dans le CSS finale, il suffit de le décorer avec des parenthèses.

Exemple de mixins avec et sans parenthèses :

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin();
  .my-other-mixin();
}
.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

Exemple de mixins paramétré avec appel récursif :

.generate-h(@n, @i: 1) when (@i =< @n) {
  h@{i} {
    font-family: 'Dosis', sans-serif;
    font-weight: (800 / pow(2, @i - 1));
    font-size: (3em - ((@i - 1) * 0.5));
  }
  .generate-h(@n, (@i + 1));
}
.generate-h(3);
h1 {
  font-family: 'Dosis', sans-serif;
  font-weight: 800;
  font-size: 3em;
}
h2 {
  font-family: 'Dosis', sans-serif;
  font-weight: 400;
  font-size: 2.5em;
}
h3 {
  font-family: 'Dosis', sans-serif;
  font-weight: 200;
  font-size: 2em;
}

Sélecteurs parents

Nous l’avons vu en début d’article, l’imbrication permet une meilleure lecture du code. Mais elle permet également d’effectuer des combinaisons intéressantes grâce à l’opérateur & qui représente le ou les sélecteurs parents d’une règle. Celui-ci vous permet de produire des noms de classe répétitifs ou d’appliquer des pseudo-classe (:active par exemple) sur un sélecteur.

.button {
  color: blue;
  &:hover {
    color: green;
  }
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }
}
.button {
  color: blue;
}
.button:hover {
  color: green;
}
.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}

Conclusion

Outre tous les exemples que nous avons vu, LESS propose également la possibilité de mieux gérer les imports de fichiers, ce qui vous permet de les diviser pour une meilleure organisation de votre code LESS. Vous l’aurez compris, LESS est une excellente alternative au langage CSS apportant un nombre important d’amélioration simplifiant ainsi la maintenance de vos feuilles de style.

Comme évoqué plus haut, il existe d’autres préprocesseurs CSS qui feront l’objet d’un prochain article. En attendant, laissez vous tenter par LESS.

Tips

Pour améliorer votre expérience avec LESS, il est possible de l’associer avec un « linter » CSS comme Stylelint qui se chargera d’appliquer des règles sur la manière de rédiger le code LESS / CSS. Stylelint effectuera également un contrôle sur le code produit pour éliminer par exemple les éventuelles fautes de syntaxe. C’est une très bonne pratique dans le cas où votre code est partagé avec d’autres développeurs et pour faciliter sa lecture.

Pour combiner Stylelint avec LESS, rien de plus simple, exécutez la commande suivante dans votre terminal bash :

npm i -D stylelint stylelint-config-standard

Créez un fichier de configuration .stylelintrc.json à la racine de votre projet Web et ajoutez-y le code suivant :

{
  "extends": "stylelint-config-standard"
}

Vous fournissez ainsi une liste de règles recommandées pour Stylelint. Vous avez la possibilité de surcharger ces règles en ajoutant un attribut rules dans ce même fichier de configuration.

Maintenant que Stylelint est installé, il faudrait pouvoir l’exécuter en amont de notre préprocessing. Pour cela il suffit de modifier les scripts ajoutés précédemment comme suit :

"scripts": {
  [...]
  "css:build": "npm run css:lint && npm run css:less",
  "css:less": "less-watch-compiler --run-once src dist",
  "css:lint": "stylelint src/**/*.less --syntax less || true"
}

Il ne vous reste plus qu’à lancer la commande suivante pour vérifier puis préprocesser le code LESS :

npm run css:build

Références

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

CSS

Préprocesser le CSS avec LESS

par Cyrille Perrot Temps de lecture: 6 min
Développement FrontEnd Appeler une API dans un composant fonctionnel Reac…
Développement FrontEnd FAST, la nouvelle librairie de composants Web par …
0