LESS online zu CSS kompilieren – Browser-LESS-Compiler

Kompilieren Sie LESS zu CSS mit less.js lokal. Ausgabe komprimieren, optionale Source Maps — läuft vollständig 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

• Externe @import-Pfade können nicht aufgelöst werden — fügen Sie vollständiges LESS in den Editor ein. • 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 (⌘↵). • Kombinieren Sie downstream mit beautify-less oder minify-css.

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?

Der Compiler läuft clientseitig ohne Dateisystem- oder Netzwerkzugriff zum Auflösen externer Dateien. Fügen Sie das benötigte LESS direkt in den Editor ein.

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 ⌘↵.

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.

SCSS zu CSS kompilieren

Weitere Werkzeugkategorien entdecken

Minimieren

Verkleinern Sie Code und Ressourcen für die Produktion – minimieren Sie JavaScript, CSS, HTML, JSON und XML vor der Bereitstellung von gzip oder CDN.

Verschönern

Machen Sie Code mit konsistenter Einrückung lesbar – verschönern Sie JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML und mehr in Ihrem Browser.

Aufheben

Erweitern Sie minimierten oder komprimierten Code – entminifizieren Sie JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML und andere Formate beim Debuggen oder Überprüfen.

Konvertierung

Transformieren Sie Daten zwischen JSON, YAML, XML und CSV lokal – keine Server-Uploads.

JSON Werkzeuge

Validieren, formatieren, vergleichen und erkunden Sie JSON-Nutzlasten – ergänzend zu Minifiern und Konvertern.

SVG Werkzeuge

Vorschau anzeigen, mit SVGO optimieren, Daten exportieren URI, Größe ändern, verschönern, in JSX konvertieren und SVG validieren – alles in Ihrem Browser.

DevOps und Infrastruktur

Terraform HCL formatieren/validieren/minimieren, Dockerfile formatieren und lint, Docker Verfassen und .env-Validierung.

CI/CD

GitHub Aktionen und GitLab CI – formatieren Sie YAML und überprüfen Sie die Workflow-/Auftragsstruktur in Ihrem Browser.

Protokolle und Beobachtbarkeit

Zeilenorientierte JSON/NDJSON- und Nginx/Apache-Zugriffsprotokolle – formatieren, filtern, validieren und CSV/TSV.

Kubernetes

Multi-Doc-Manifeste, strukturelle Validierung, Ingress/Deployment-Starter und Helm-Werteformatierung.

Netzwerk / IP

CIDR, Subnetze und IPv4/IPv6-Helfer — im Browser.

Sicherheit und Token

JWKS, X.509-Zertifikate und Secrets-Scan – browserlokal.

API & Schemata

OpenAPI Tools zum Formatieren, Validieren und Flusen Ihrer Spezifikationen.

Codierung

Kodieren oder dekodieren Sie Base64-, URL-Komponenten und HTML-Entitäten – nur clientseitig.

Entwickler-Dienstprogramme

Zeitstempel, UUID, ULID, Nanoid, Cron, Passwörter, Regex, Slugify, Zahlenbasen, Groß-/Kleinschreibung, Textunterschied und chmod – alles clientseitig.

Text & Markdown

Wörter zählen, Markdown-TOC erzeugen und Zeilenlisten bereinigen — im Browser.

Serialisierung

Serialisieren und deserialisieren Sie PHP-Datenstrukturen neben JSON-Workflows.