Compiler LESS en CSS en ligne — Compilateur less.js navigateur

Compilez un extrait LESS ou regroupez un dossier de projet local avec résolution native de @import. Compression de la sortie et source maps pour un seul fichier : tout s’exécute dans votre navigateur.

Chargement…
Compilateur LESS — guide navigateur
Compilez des extraits LESS en CSS standard avant minification ou partage. Exécute less.js à la demande dans votre navigateur.

Notes développeur

Déposez un dossier pour résoudre les @import locaux. node_modules, les paquets et les URL distantes ne sont pas résolus. Le JavaScript inline dans LESS est désactivé par défaut ; activez-le seulement si vous faites confiance à la source. Strict math exige des parenthèses autour des calculs quand activé. Auto-compilation au collage/exemple ; la saisie nécessite Compiler (⌘↵). Les source maps sont disponibles en monofichier et indisponibles en mode projet v1.

Regrouper des partials locaux

Choisissez Regrouper un projet, déposez un dossier puis sélectionnez un fichier d’entrée. FastMinify conserve les chemins relatifs et Less découvre les fichiers .less accessibles via @import. La limite locale est de 32 Mio par fichier et 32 Mio au total. La v1 accepte une seule entrée, sans source map ni résolution de paquets node_modules.

Options

Compresser
Supprime les espaces superflus de la sortie CSS compilée.
Source map
Intègre une source map inline dans la sortie CSS pour le débogage.
JavaScript inline
Autorise les fonctionnalités LESS qui évaluent des expressions JavaScript — désactivé par défaut par sécurité.
Strict math
Exige des parenthèses autour des opérations mathématiques dans les expressions LESS.

Quand les équipes choisissent cette voie

Convertir des composants LESS legacy en CSS pour migration. Prévisualiser des mixins paramétriques avant intégration dans un build. Partager du CSS compilé avec des collègues qui n'utilisent pas LESS. Vérifier rapidement expressions de guards et opérations.

Exemples commentés

Variables et opérations

Entrée LESS

@base: #336699; @gap: 8px + 4px; .panel { color: @base; margin: @gap; }

CSS compilé

.panel { color: #336699; margin: 12px; }

Mixin paramétrique

Entrée LESS

.rounded(@r: 4px) { border-radius: @r; } .btn { .rounded(6px); padding: 8px; }

CSS compilé

.btn { border-radius: 6px; padding: 8px; }

Outils associés

Beautifiez LESS avec beautifier LESS, décompressez avec déminifier LESS, ou parcourez le hub préprocesseurs CSS.

FAQ compilateur LESS

Compilation navigateur uniquement

Pourquoi ne puis-je pas utiliser @import pour Bootstrap ou d'autres bibliothèques ?

Les projets regroupés résolvent les fichiers .less locaux déposés dans le navigateur. Les chemins vers node_modules, des paquets, des CDN ou hors du dossier déposé ne sont pas disponibles.

Que fait Strict math ?

Quand activé, des calculs comme 8px + 4px exigent des parenthèses. Cela correspond aux modes compilateur LESS plus stricts utilisés dans certains pipelines de build.

Quand la compilation s'exécute-t-elle automatiquement ?

Au collage et au chargement d'exemple. La saisie seule ne déclenche pas la compilation — utilisez Compiler ou ⌘↵.

Un projet regroupé est-il une simple concaténation ?

Non. Less part d’un fichier d’entrée et résout uniquement les dépendances @import atteignables. Aucun ordre manuel n’est concaténé. La v1 est limitée à une entrée, 32 Mio au total, sans source map ni imports npm.

Préprocesseurs CSS

Compilez SCSS ou LESS en CSS standard dans le navigateur — complétez avec beautify ou minify pour un workflow feuille de style complet.

Découvrez les autres catégories d'outils