Convertir LESS en CSS

Comment ça marche

Un ancien thème Bootstrap 3 ou un modèle WordPress est souvent écrit en LESS, et le navigateur ne lit pas le LESS : il faut d'abord le compiler en CSS classique. Collez le code dans la zone de gauche. À droite, les variables comme @couleur sont remplacées par leur valeur, les appels de mixin comme .ombre(8px) par les règles qu'ils contiennent, les règles imbriquées deviennent des sélecteurs comme .carte h2, et les fonctions de couleur comme darken(@couleur, 10%) sont calculées en un code couleur comme #08427d. Les opérations comme (@marge / 2) sont aussi résolues : la moitié de 16px donne 8px. La sortie lisible est indentée de 2 espaces ; avec Minifiée, espaces et commentaires disparaissent et le CSS tient sur une ligne. Si le code utilise une variable non définie ou laisse une accolade ouverte, rien n'est compilé et vous voyez la ligne et la colonne du problème. La ligne de résultat indique combien de lignes de LESS ont donné combien de lignes de CSS, et la taille en octets. Le contenu appelé par @import depuis un autre fichier n'arrive pas sur cette page ; collez aussi le texte de ce fichier.

Cet outil est aussi connu sous le nom de convertir less en css, less to css, compilateur less en ligne, compiler less en ligne, less vers css, lessc en ligne.

Qu'est-ce que LESS ?

LESS (Leaner Style Sheets) est un langage de préprocesseur qui ajoute au CSS des variables, des mixins, des règles imbriquées et des fonctions de couleur. Il est apparu en 2009 ; Bootstrap 3 et des milliers de thèmes construits dessus sont écrits en LESS. Le navigateur ne lit pas un fichier .less directement : un compilateur remplace les variables par leurs valeurs, déplie les règles imbriquées et produit un fichier .css classique.

Qu'est-ce que Mixin ?

En LESS, un mixin est un groupe de règles nommé que l'on réutilise dans d'autres règles : .ombre(@profondeur) { box-shadow: ... } s'écrit une fois, puis s'appelle avec .carte { .ombre(8px); }. À la compilation, l'appel est remplacé par les propriétés du mixin, remplies avec les valeurs passées. Il n'est pas nécessaire d'écrire dix fois la même ombre pour l'utiliser à dix endroits.

Quelle différence entre LESS et SCSS ?

Les deux sont des préprocesseurs qui ajoutent variables, mixins et règles imbriquées au CSS, et ils font le même travail ; la différence tient à la syntaxe et à l'écosystème. LESS écrit les variables avec @ (@couleur), SCSS avec $ ($couleur). En LESS un mixin s'appelle comme une classe ordinaire (.ombre();), en SCSS il faut @mixin et @include. Bootstrap 3 utilisait LESS, Bootstrap 4 et suivants sont passés au SCSS ; on rencontre donc surtout LESS dans les anciens thèmes et projets.

Pourquoi mes fichiers @import ne sont-ils pas compilés ?

Cette page compile uniquement le texte collé ; elle ne peut pas lire d'autres fichiers sur votre ordinateur ou sur un serveur, car votre code n'est envoyé nulle part. C'est pourquoi une ligne comme @import "variables.less" renvoie une erreur de fichier illisible. La solution est simple : copiez le contenu du fichier importé et collez-le à la place de la ligne @import. Pour un projet en plusieurs fichiers comme Bootstrap, utilisez la commande de compilation du projet (lessc).

Un import CSS écrit avec url(...), comme une adresse Google Fonts, n'est pas compilé mais passe tel quel dans la sortie ; le navigateur le charge à l'ouverture de la page. Le JavaScript en ligne (expressions entre accents graves) est désactivé par défaut dans less 4 et ne s'exécute pas non plus ici.

Lisible ou minifiée ?

La sortie lisible convient pour examiner le CSS compilé, voir d'où vient une règle, ou abandonner LESS et continuer en CSS classique. La sortie minifiée est destinée au fichier du site en ligne : espaces et commentaires sont retirés, le fichier est plus léger.

Si vous quittez LESS, prenez la sortie lisible. Les valeurs remplacent alors les variables ; changer une couleur plus tard veut dire modifier plusieurs lignes. Les variables CSS (--couleur) sont un bon remplaçant pour cela.

• Voir le code compilé, passer de LESS au CSS classique → Lisible
• Mettre en ligne sur le site → Minifiée
• Projet Bootstrap en plusieurs fichiers → commande lessc du projet

Questions fréquentes

Comment convertir un fichier LESS en CSS ?

Copiez le contenu du fichier .less et collez-le dans la zone de gauche de cette page. Le CSS compilé apparaît à droite ; copiez-le ou téléchargez-le en fichier .css. Si le fichier importe d'autres fichiers .less, ajoutez aussi leur contenu au texte.

Que veut dire « la variable n'est pas définie » ?

Une @variable utilisée dans le code n'est déclarée nulle part dans le même texte. Les variables se trouvent souvent dans un fichier à part (comme variables.less) chargé avec @import ; collez aussi son contenu et l'erreur disparaît.

Puis-je aussi compiler du SCSS ou du Sass ?

Non. Le SCSS a une autre syntaxe ($variable, @include) et demande un autre compilateur. Cette page compile uniquement le LESS ; pour simplement indenter du SCSS, l'outil de mise en forme CSS convient.

Mon code est-il envoyé à un serveur ?

Non. La compilation se fait entièrement dans votre navigateur ; le code collé ne quitte pas cette page et n'est enregistré nulle part.