LESS online zu CSS kompilieren – less.js im Browser

Kompilieren Sie ein LESS-Snippet oder bündeln Sie einen lokalen Projektordner mit nativer @import-Auflösung. Die Ausgabe lässt sich komprimieren, und für Einzeldateien gibt es Source-Maps. Alles läuft in Ihrem Browser.

Laden…
LESS-Compiler – Browser-Leitfaden
Kompilieren Sie LESS-Snippets zu Standard-CSS vor dem Minifizieren oder Teilen. Führt less.js bei Bedarf in Ihrem Browser aus.

Entwicklerhinweise

Legen Sie einen Projektordner ab, um lokale @import-Pfade aufzulösen. node_modules, Pakete und entfernte URLs werden nicht aufgelöst. Inline-JavaScript in LESS ist standardmäßig deaktiviert; aktivieren Sie es nur, wenn Sie der Quelle vertrauen. Strict math erfordert Klammern um Berechnungen, wenn aktiviert. Auto-Kompilierung beim Einfügen/Beispiel; getippte Änderungen benötigen Kompilieren (⌘↵). Source-Maps sind für Einzeldateien verfügbar und im Bundle-Modus v1 nicht verfügbar.

Lokale Partials bündeln

Wählen Sie Projekt bündeln, legen Sie einen Ordner ab und bestimmen Sie eine Einstiegsdatei. FastMinify erhält relative Pfade, während Less erreichbare .less-Dateien über @import findet. Das browserlokale Limit beträgt 32 MiB pro Datei und insgesamt. Version 1 unterstützt einen Einstieg, keine Source-Maps und keine node_modules-Pakete.

Optionen

Komprimieren
Entfernt unnötige Leerzeichen aus der kompilierten CSS-Ausgabe.
Source Map
Betten eine Inline-Source-Map in der CSS-Ausgabe zum Debuggen ein.
Inline-JavaScript
Erlaubt LESS-Funktionen, die JavaScript-Ausdrücke auswerten — standardmäßig aus Sicherheitsgründen deaktiviert.
Strict math
Erfordert Klammern um mathematische Operationen in LESS-Ausdrücken.

Wann Teams diesen Weg wählen

Legacy-LESS-Komponenten für Migration in CSS umwandeln. Parametrische Mixins vor Integration in einen Build ansehen. Kompiliertes CSS mit Teamkollegen teilen, die LESS nicht nutzen. Guard-Ausdrücke und Operationen schnell prüfen.

Ausgearbeitete Beispiele

Variablen und Operationen

LESS-Eingabe

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

Kompiliertes CSS

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

Parametrisches Mixin

LESS-Eingabe

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

Kompiliertes CSS

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

Verwandte Tools

Verschönern Sie LESS mit LESS verschönern, dekomprimieren Sie mit LESS entminifizieren, oder durchsuchen Sie den CSS-Präprozessoren-Hub.

LESS-Compiler FAQ

Nur Browser-Kompilierung

Warum kann ich @import für Bootstrap oder andere Bibliotheken nicht verwenden?

Projekt-Bundles lösen lokale .less-Dateien auf, die Sie im Browser ablegen. Pfade zu node_modules, Paketen, CDNs oder außerhalb des abgelegten Ordners sind nicht verfügbar.

Was bewirkt Strict math?

Wenn aktiviert, erfordern Berechnungen wie 8px + 4px Klammern. Dies entspricht strengeren LESS-Compiler-Modi in einigen Build-Pipelines.

Wann läuft die Kompilierung automatisch?

Beim Einfügen und Laden von Beispielen. Alleiniges Tippen löst keine Kompilierung aus — verwenden Sie Kompilieren oder ⌘↵.

Ist ein Projekt-Bundle dasselbe wie Dateiverkettung?

Nein. Less beginnt mit einer Einstiegsdatei und löst nur erreichbare @import-Abhängigkeiten auf. Es gibt keine manuelle Dateireihenfolge. Version 1 ist auf einen Einstieg und 32 MiB insgesamt begrenzt, ohne Source-Maps oder npm-Paketimporte.

CSS-Präprozessoren

Kompilieren Sie SCSS oder LESS zu Standard-CSS im Browser — kombinieren Sie mit Beautify oder Minify für einen vollständigen Stylesheet-Workflow.

Weitere Werkzeugkategorien entdecken