Formateur LESS

Formatez votre code LESS avec variables @ et mixins.

LESS Source

Formatage

Options

LESS Formaté

Guide complet : Préprocesseur LESS pour CSS moderne

LESS : le préprocesseur CSS pionnier

LESS (Leaner Style Sheets) est un préprocesseur CSS créé en 2009 par Alexis Sellier. Il a été l'un des premiers à ajouter des fonctionnalités de programmation au CSS : variables, mixins, fonctions, et nesting. Bootstrap, le framework CSS le plus populaire au monde, utilisait LESS jusqu'à la version 3 avant de migrer vers Sass/SCSS en version 4.

La particularité unique de LESS est sa capacité à être compilé côté client via less.js. Cette fonctionnalité permet de développer sans configuration de build, idéal pour l'apprentissage et le prototypage rapide. Aujourd'hui, bien que SCSS soit plus répandu, LESS reste utilisé dans de nombreux projets legacy et certains écosystèmes spécifiques.

Syntaxe LESS essentielle

🏷️ Variables @

@primary: #6366f1; puis color: @primary;. Notez le @ au lieu du $ de SCSS. Les variables sont évaluées "lazily" (au moment de l'utilisation).

🔧 Mixins

.flex-center() { display: flex; justify-content: center; } puis .flex-center(); pour inclure. Paramétrables : .rounded(@r: 8px) { border-radius: @r; }

🗂️ Nesting

Imbriquez les sélecteurs pour refléter la structure HTML. & pour référencer le parent : .btn { &:hover { } &--primary { } }

➕ Opérations mathématiques

Calculs directs : width: @base * 2;, padding: @spacing + 4px;. LESS gère automatiquement les unités compatibles.

Fonctionnalités avancées LESS

  • Guards (conditions) : .mixin(@a) when (@a > 10px) { ... }. Logique conditionnelle dans les mixins.
  • Extend : .child:extend(.parent) { }. Héritage de styles sans duplication de CSS.
  • Namespaces : #bundle() { .button() { } } puis #bundle.button();. Organisation modulaire.
  • Fonctions intégrées : lighten(@color, 10%), darken(), fade(), mix(). Manipulation de couleurs.
  • Imports : @import "variables.less";. Modularisation du code.

LESS vs SCSS : comparaison honnête

  • Variables : @ en LESS, $ en SCSS
  • Mixins : Syntaxe fonction .mixin() en LESS, @mixin/@include en SCSS
  • Conditions : Guards en LESS, @if/@else en SCSS (plus lisible)
  • Boucles : Récursion en LESS (complexe), @for/@each en SCSS (plus simple)
  • Écosystème : SCSS domine largement aujourd'hui, meilleur outillage et communauté
  • Compilation client : Possible en LESS (unique), pas en SCSS

Traitement local : confidentialité assurée

Ce formateur utilise css-beautify pour embellir votre code LESS directement dans votre navigateur. Aucune donnée n'est envoyée à un serveur. Formatez vos styles propriétaires en toute confiance.

Questions fréquentes sur LESS

LESS ou SCSS pour un nouveau projet en 2024 ?

Pour les nouveaux projets, SCSS est généralement recommandé :

  • Communauté plus large et plus de ressources (tutoriels, Stack Overflow)
  • Meilleur support dans les IDEs et outils de build
  • Syntaxe plus puissante pour les boucles et conditions
  • Bootstrap 4+, Foundation, et la majorité des frameworks modernes utilisent SCSS

LESS reste pertinent si :

  • Votre équipe le maîtrise déjà
  • Vous maintenez un projet existant en LESS
  • Vous avez besoin de compilation côté client

Les deux compilent vers du CSS standard, donc le choix n'affecte pas le résultat final.

Peut-on mélanger LESS et CSS dans un fichier ?

Oui, absolument ! LESS est un superset de CSS :

  • Tout CSS valide est automatiquement du LESS valide
  • Vous pouvez renommer un fichier .css en .less et il compilera
  • Ajoutez progressivement des fonctionnalités LESS (variables, mixins) au fur et à mesure

Cette compatibilité facilite la migration graduelle et sans risque d'un projet CSS vers LESS.

Comment migrer de LESS vers SCSS ?

Conversions principales :

  • Variables : @variable → $variable
  • Déclaration mixin : .mixin() { } → @mixin mixin { }
  • Appel mixin : .mixin(); → @include mixin;
  • Guards : when (@a > 10) → @if $a > 10 { }
  • Extend : :extend(.class) → @extend .class

Outils d'aide : less2sass automatise partiellement la conversion. Le nesting et les opérateurs sont identiques, donc pas de changement nécessaire.

La compilation côté client LESS est-elle recommandée ?

Non pour la production. La compilation côté client :

  • Ajoute ~50KB de JavaScript (less.js)
  • Retarde le rendu initial (compilation au chargement)
  • Peut causer un FOUC (Flash of Unstyled Content)

Cas d'usage légitimes :

  • Prototypage rapide sans configuration
  • Apprentissage de LESS
  • Outils de design en temps réel (thèmes dynamiques)

En production : Compilez en amont avec webpack, Vite, gulp, ou la CLI lessc.

Comment configurer LESS avec Webpack ou Vite ?

Webpack :

  • npm install less less-loader css-loader style-loader
  • Ajoutez une règle pour les fichiers .less dans votre config webpack

Vite :

  • npm install less (suffisant, Vite détecte automatiquement)
  • Importez directement vos fichiers .less dans votre JS/TS

CLI : npm install -g less puis lessc styles.less styles.css

Mes fichiers LESS sont-ils sécurisés avec cet outil ?

Oui, totalement. Le formatage s'exécute entièrement dans votre navigateur :

  • css-beautify fonctionne localement en JavaScript
  • Aucune requête réseau n'envoie votre code
  • Vos styles ne quittent jamais votre machine
  • L'outil fonctionne même hors ligne après chargement

Vérifiez dans l'onglet Network des DevTools : zéro transmission de données.