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
- Site officiel de LESS : https://lesscss.org
- Site officiel de Stylelint : https://stylelint.io
- less-watch-compiler : https://www.npmjs.com/package/less-watch-compiler
- Initialiser un projet Node.js sous TypeScript et ESLint
0 commentaire