Convertir LESS en CSS en Ligne
Compile ton code LESS en CSS pur dans ton navigateur. Sans npm, sans Node.js, sans configuration.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Compilateur LESS vers CSS
Pourquoi utiliser ce compilateur LESS ?
Zero configuration
Pas de npm, pas de webpack, pas de Grunt. Colle ton code LESS et obtiens du CSS instantanement.
less.js officiel
Utilise le compilateur officiel less.js. Compatibilite maximale avec le standard LESS.
Confidentialite totale
Ton code LESS n'est jamais envoye a aucun serveur. Tout se passe dans ton navigateur.
Projets Bootstrap 3
Compile facilement des themes Bootstrap 3 et d'autres projets legacy bases sur LESS.
Comment ça marche
Trois étapes, sans complications
Colle ton code LESS
Ecris ou colle ton code LESS dans l'editeur. Les variables @, l'imbrication, les mixins et les operations mathematiques sont pris en charge.
Compilation instantanee
Le CSS resultant s'affiche automatiquement. Le compilateur LESS.js tourne localement dans ton navigateur.
Copie ou telecharge le CSS
Copie le CSS dans le presse-papiers ou telecharge-le sous forme de fichier .css pret a l'emploi.
FAQ
Des questions ?
LESS (cree par Alexis Sellier, alias 'cloudhead', en 2009) et SCSS (une partie de Sass, cree en 2006) sont des preprocesseurs CSS aux philosophies differentes. La difference la plus visible est la syntaxe des variables : LESS utilise @ (le meme prefixe que les at-rules CSS comme @media, ce qui peut preter a confusion), tandis que SCSS utilise $. LESS a ete concu pour etre traite aussi bien dans le navigateur (via less.js) que cote serveur. SCSS dispose d'un ecosysteme plus riche (Compass, Bootstrap 4+, Angular) et du compilateur officiel Dart Sass. LESS reste pertinent surtout grace aux projets legacy qui ont utilise Bootstrap 3 et a son compilateur JavaScript natif (less.js).
Les variables LESS se definissent avec @nom: valeur; et s'utilisent directement : @couleur-base: #4d90fe; @police: 'Roboto', sans-serif; color: @couleur-base. Une caracteristique propre a LESS est l'evaluation paresseuse (lazy evaluation) : les variables peuvent etre utilisees avant leur declaration dans le meme scope, car LESS traite tout le fichier avant de resoudre les valeurs. Cela contraste avec SCSS ou les variables suivent un ordre de declaration plus strict. Les variables LESS peuvent aussi etre interpolees dans des selecteurs et des noms de proprietes avec la syntaxe @{nom}.
Les mixins LESS se definissent comme des classes CSS normales et s'invoquent avec la meme syntaxe : .mixin() definit le mixin et l'appeler a l'interieur d'une autre regle l'inclut. Il n'y a pas de mot-cle @mixin comme dans SCSS. Cela signifie que n'importe quelle classe CSS existante peut etre utilisee comme mixin en l'appelant simplement. Les mixins avec parametres utilisent la syntaxe .mixin(@param: valeur-defaut). LESS prend aussi en charge les gardes de mixins : .mixin(@a) when (@a > 10) { ... } pour la compilation conditionnelle, une fonctionnalite que SCSS implemente avec @if.
Non. Bootstrap 3 (2013) a ete le moment d'adoption massive de LESS, en le rendant connu d'une generation entiere de developpeurs web. Bootstrap 4 (2018) a migre entierement vers SCSS (Sass), et Bootstrap 5 (2021) a continue avec SCSS. La migration de Bootstrap a ete l'un des facteurs qui a consolide SCSS comme le preprocesseur dominant de l'ecosysteme moderne. Si tu as un projet legacy avec Bootstrap 3, cet outil peut t'aider a extraire le CSS compile sans maintenir un environnement de compilation LESS.
L'outil compile le code LESS que tu fournis directement, mais ne peut pas resoudre les references a des fichiers externes via @import car il fonctionne dans le navigateur sans acces au systeme de fichiers. Si tu as plusieurs fichiers LESS, tu peux les concatener manuellement avant de compiler. Pour des projets avec une structure modulaire complexe, un environnement de compilation local avec less.js ou l'integration de LESS dans ton bundler (webpack, Vite, Parcel) reste necessaire.
LESS est encore necessaire dans trois contextes principaux : la maintenance de projets legacy avec Bootstrap 3 ou des themes WordPress/Magento/Drupal utilisant LESS ; l'extraction de CSS a partir de fragments LESS trouves dans du code herite pour le migrer vers du CSS natif ou SCSS ; et l'apprentissage de la syntaxe LESS pour travailler sur des bases de code existantes. Pour les nouveaux projets, la recommandation actuelle est SCSS/Sass ou directement du CSS moderne avec des proprietes personnalisees et @layer.
LESS vers CSS en ligne : compile LESS sans npm ni Node.js, ideal pour les projets Bootstrap 3
LESS est un langage de preprocessing CSS cree par Alexis Sellier (connu en ligne sous le pseudo 'cloudhead') et publie en 2009 en open source sous licence Apache. Sellier l'a d'abord ecrit en Ruby, mais c'est la reecriture en JavaScript (less.js) en 2010 qui a defini sa popularite : pour la premiere fois, un preprocesseur CSS pouvait tourner directement dans le navigateur en chargeant le fichier .less et la bibliotheque less.js via une balise script. Cette capacite de compilation cote client, rarement utilisee en production pour des raisons de performance, a democratise l'acces au preprocessing CSS sans necessiter d'infrastructure de build. Les fonctionnalites principales de LESS sont son heritage direct du CSS (tout CSS valide est du LESS valide), les variables avec prefixe @ (@couleur: #fff), l'imbrication de selecteurs identique a SCSS, les mixins comme classes invocables (.mixin()), les operations arithmetiques directes sur les valeurs (margin: @base * 2), et les fonctions de couleur integrees (lighten, darken, mix, etc.).
L'impact le plus important de LESS sur l'ecosysteme web est venu via Bootstrap, le framework d'interface utilisateur le plus populaire au monde. Bootstrap 2 (2012) et Bootstrap 3 (aout 2013) ont utilise LESS comme systeme de personnalisation et de compilation, exposant des millions de developpeurs web a la syntaxe LESS a travers les variables et mixins du framework. Les themes Bootstrap 3 etaient distribues sous forme de collections de fichiers .less avec des variables personnalisees qui compilaient le CSS final. Cette integration a fait de LESS le preprocesseur le plus connu pendant la periode 2013-2018, meme si SCSS etait deja techniquement plus riche. La decision de Bootstrap 4 (version alpha en 2015, version stable en janvier 2018) de migrer vers SCSS a ete le tournant definitif : les nouveaux projets sont passes a SCSS et LESS est devenu principalement associe a la maintenance de projets legacy.
Le besoin d'un compilateur LESS en ligne en 2024 se concentre principalement sur trois scenarios de maintenance et de migration. Le premier est l'ecosysteme legacy Bootstrap 3 : bien que Bootstrap 5 soit disponible depuis des annees, de nombreuses applications d'entreprise et sites WordPress utilisent encore des themes bases sur Bootstrap 3 avec des personnalisations LESS. Lorsque tu dois extraire le CSS compile d'un fragment specifique ou verifier la sortie d'une variable ou d'un mixin, le faire en ligne est plus rapide que de maintenir un environnement de compilation. Le deuxieme scenario est la migration de LESS vers SCSS ou le CSS moderne : comprendre quel CSS genere un bloc LESS specifique est la premiere etape pour le reecrire en SCSS ou avec des proprietes personnalisees natives. Le troisieme scenario concerne la maintenance de themes Magento (qui utilise LESS extensivement dans son systeme de themes pour Magento 2), certains themes Drupal, et des applications construites sur des frameworks internes ayant adopte LESS pendant la periode 2012-2017. Convertir.ai execute le compilateur officiel less.js dans ton navigateur sans envoyer aucune ligne de code a des serveurs externes.