Formateur LESS

Formatez votre code LESS avec variables @ et mixins.

LESS Source

Formatage

Options

LESS Formaté

Guide LESS

Qu'est-ce que LESS

LESS (Leaner Style Sheets) est un préprocesseur CSS créé en 2009. Comme SCSS, il ajoute variables, mixins et nesting au CSS. Sa particularité : il peut s'exécuter côté client (moins.js) en plus de la compilation. Bootstrap utilisait LESS avant de migrer vers SCSS. LESS reste populaire dans certains écosystèmes.

Syntaxe LESS

Variables @

@primary: #6366f1; : notez le @ au lieu du $ de SCSS.

Mixins ()

.flex-center() { display: flex; } puis .flex-center(); pour inclure.

Nesting

Identique à SCSS. Utilisez & pour le parent selector.

Opérations

Calculs arithmétiques : width: @base * 2; sans calc().

LESS vs SCSS

  • Variables : @ en LESS, $ en SCSS
  • Mixins : Syntaxe fonction en LESS, @mixin/@include en SCSS
  • Écosystème : SCSS plus répandu aujourd'hui, meilleur outillage
  • Compilation client : LESS peut tourner dans le navigateur, pas SCSS

Questions fréquentes

Dois-je choisir LESS ou SCSS pour un nouveau projet ?

Pour les nouveaux projets, SCSS est généralement recommandé. Il a une communauté plus large, plus de ressources, et un meilleur support d'outils. LESS reste pertinent si votre équipe le maîtrise ou si vous utilisez des frameworks basés sur LESS. Les deux compilent vers du CSS standard.

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

Oui ! LESS est un superset de CSS : tout CSS valide est du LESS valide. Vous pouvez progressivement ajouter des fonctionnalités LESS à du CSS existant. La migration est graduelle et sans risque.

Comment migrer de LESS vers SCSS ?

Principales conversions : remplacez @ par $ pour les variables, convertissez .mixin() en @mixin mixin, et .mixin; en @include mixin;. Le nesting et les opérateurs sont identiques. Des outils automatisent partiellement cette conversion.

La compilation client LESS est-elle recommandée ?

Non pour la production : la compilation client ajoute du temps de chargement. Compilez en amont avec un build tool (webpack, gulp, vite). La compilation client est utile uniquement pour le prototypage rapide ou l'apprentissage.