Less zu CSS Compiler

Kompilieren Sie Less direkt in Ihrem Browser mit Live-Vorschau, mathematischer Auswertung, Quellkarten-Vorschau, Ausgabeformatierung, Kopier- und Download-Aktionen sowie einem direkten Less-vs-CSS-Vergleich.

Less-Quellcode

// Variablen verwenden in Less das Präfix @
@brand: #6d28d9;
@accent: #2563eb;
@surface: #ffffff;
@radius: 14px;
@gap: 1rem;

// Mixin (ein wiederverwendbarer Block)
.soft-shadow(@color) {
  box-shadow: 0 16px 36px fade(@color, 16%);
}

// Mixin-Guards
.tone(@bg) when (lightness(@bg) >= 50%) {
  color: #1e293b;
}
.tone(@bg) when (lightness(@bg) < 50%) {
  color: #ffffff;
}

.compiler-demo {
  display: grid;
  gap: @gap;
  padding: @gap * 1.25;
  border-radius: @radius;
  background: @surface;
  border: 1px solid fade(@brand, 18%);
  .soft-shadow(@brand);

&__badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: @accent;
    background: fade(@accent, 10%);
    font-weight: 800;
  }

&__button {
    border: 0;
    border-radius: @radius - 4px;
    background: linear-gradient(135deg, @brand, @accent);
    .tone(@brand);
    padding: 0.75rem 1rem;
    transition: transform .16s ease;

&:hover {
      transform: translateY(-2px);
      filter: saturate(1.15);
    }
  }
}

Tipp: Less verwendet @variable (nicht $variable). Fügen Sie importierte Partials oberhalb des Codes ein, wenn Ihr Snippet von lokalen Dateien abhängt.

Kompilierungs-Pipeline

Bereit

Less-Quelle

{ }

Parse-Baum

f(x)

Auswerten

CSS

Browser-CSS

Ausgabeformat

Mathematik-Modus

Live-Kompilierung
Während der Bearbeitung neu kompilieren. Strikte Einheiten
Fehler bei gemischten Einheiten blockieren.

.less-Datei laden

Dateien werden von Ihrem Browser lokal eingelesen und in den Editor eingefügt.

Warten auf den Less-Compiler.

Die erste Kompilierung startet, sobald Less.js bereit ist.

Less-Syntax-Kurzreferenz

Variable@brand: #6d28d9;

Mixin.shadow() { ... }

Mathematik@radius - 4px

Funktionfade(@brand, 18%)

Verschachtelung&:hover { ... }

Guardwhen (lightness(@c) >= 50%)

'; } function syntaxHighlight(text, lang) { if (!text) return ''; var html = escapeHtml(text); if (lang === 'less') { html = html.replace(/(@[-_a-zA-Z][-_a-zA-Z0-9]*)/g, '$1'); html = html.replace(/(\/\/[^\n]*)/g, '$1'); } else { html = html.replace(/(\/\*[\s\S]*?\*\/)/g, '$1'); html = html.replace(/(^|\n)(\s*)([\.#&\*:a-zA-Z][^\{\n]*)(\s*\{)/g, '$1$2$3$4'); } return html; } function renderDiff(lessText, cssText) { if (diffLess) diffLess.innerHTML = syntaxHighlight(lessText, 'less'); if (diffCss) diffCss.innerHTML = syntaxHighlight(cssText, 'css'); } function switchView(view) { if (!viewOutputBtn || !viewDiffBtn) return; var isDiff = view === 'diff'; viewOutputBtn.classList.toggle('is-active', !isDiff); viewDiffBtn.classList.toggle('is-active', isDiff); if (outputView) outputView.classList.toggle('is-hidden', isDiff); if (diffView) diffView.classList.toggle('is-visible', isDiff); } function compileLess() { var text = source.value || ''; var serial = ++compileSerial; if (!text.trim()) { lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(''); renderDiff('', ''); setStatus('error', 'Fügen Sie Less-Code hinzu, bevor Sie kompilieren.', 'Fügen Sie einen Less-Quellcode ein oder klicken Sie oben auf einen Schnellstarter-Button.'); setFlow('source', {error: true}); return; } waitForLess(function () { setFlow('parse'); setStatus('pending', 'Kompiliere Less...', 'Less.js parst und wertet Ihren Code in Ihrem Browser aus.'); var opts = buildOptions(); var startTime = performance.now ? performance.now() : Date.now(); try { var promise = window.less.render(text, opts); if (promise && typeof promise.then === 'function') { promise.then(function (result) { if (serial !== compileSerial) return; var elapsed = (performance.now ? performance.now() : Date.now()) - startTime; lastCss = result.css || ''; output.value = lastCss; updateMetrics(lastCss); renderPreview(lastCss); renderWarnings(text); renderDiff(text, lastCss); setFlow('css'); setStatus('ok', 'Erfolgreich kompiliert.', 'Dauerte ' + Math.round(elapsed) + ' ms. Klicken Sie auf die Diff-Ansicht, um Less vs CSS nebeneinander zu sehen.'); }).catch(function (err) { if (serial !== compileSerial) return; handleError(err, text); }); } } catch (err) { handleError(err, text); } }, 0); } function handleError(err, text) { var msg = err && err.message ? err.message : 'Überprüfen Sie die Less-Syntax und versuchen Sie es erneut.'; var loc = ''; if (err && (err.line || err.line === 0)) { loc = ' Zeile ' + (err.line + 1) + (err.column !== undefined ? ', Spalte ' + (err.column + 1) : '') + '.'; } var failedStep = /parse/i.test(String(err && err.type)) ? 'parse' : 'eval'; lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(text); renderDiff(text, ''); setStatus('error', 'Kompilierungsfehler.', msg + loc); setFlow(failedStep, {error: true}); } function scheduleCompile() { if (!autoCompile.checked) return; window.clearTimeout(compileTimer); compileTimer = window.setTimeout(compileLess, 360); } function copyText(text, button) { if (!text) return; function done() { var old = button.textContent; button.textContent = '✓ Kopiert'; window.setTimeout(function () { button.textContent = old; }, 1200); } if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(done).catch(function () { fallbackCopy(text); done(); }); return; } fallbackCopy(text); done(); } function fallbackCopy(text) { var temp = document.createElement('textarea'); temp.value = text; temp.setAttribute('readonly', 'readonly'); temp.style.position = 'fixed'; temp.style.left = '-9999px'; document.body.appendChild(temp); temp.select(); try { document.execCommand('copy'); } catch (e) {} document.body.removeChild(temp); } function downloadCss() { if (!lastCss) return; var blob = new Blob([lastCss], {type: 'text/css;charset=utf-8'}); var url = URL.createObjectURL(blob); var link = document.createElement('a'); link.href = url; link.download = 'compiled.css'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } document.querySelectorAll('[data-preset]').forEach(function (button) { button.addEventListener('click', function () { var preset = presets[button.getAttribute('data-preset')]; if (!preset) return; source.value = preset.code; compileLess(); }); }); source.addEventListener('input', scheduleCompile); outputStyle.addEventListener('change', compileLess); mathMode.addEventListener('change', compileLess); strictUnits.addEventListener('change', compileLess); autoCompile.addEventListener('change', function () { if (autoCompile.checked) compileLess(); }); compileButton.addEventListener('click', compileLess); clearButton.addEventListener('click', function () { source.value = ''; compileLess(); }); if (copyButton) copyButton.addEventListener('click', function () { copyText(lastCss || output.value, copyButton); }); if (downloadButton) downloadButton.addEventListener('click', downloadCss); if (viewOutputBtn) viewOutputBtn.addEventListener('click', function () { switchView('output'); }); if (viewDiffBtn) viewDiffBtn.addEventListener('click', function () { switchView('diff'); }); fileInput.addEventListener('change', function () { var file = fileInput.files && fileInput.files[0]; if (!file) return; var reader = new FileReader(); reader.onload = function () { source.value = String(reader.result || ''); compileLess(); }; reader.onerror = function () { setStatus('error', 'Datei konnte nicht gelesen werden.', 'Wählen Sie eine UTF-8 .less-Datei und versuchen Sie es erneut.'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); renderDiff(source.value || '', ''); setFlow('source'); compileLess(); })(); });

Embed Less zu CSS Compiler Widget

Kompilierte CSS-Ausgabe

Generiertes CSS, Live-Vorschau, Nebeneinander-Vergleich und Export — alles bleibt während des Editierens auf der Seite.

0 CSS-Zeilen

0 B Ausgabegröße

0 Regelblöcke

0% Ausgabe / Quelle

@ Less-QuelleEingabe

{ } CSS-AusgabeErgebnis

CSS-Ausgabe

Vorschau & Status

Warten auf die erste Kompilierung.

Das kompilierte CSS erscheint hier, sobald Less.js bereit ist.

Die Vorschau verwendet ein isoliertes (sandboxed) iframe, damit Test-Styles niemals auf den Rest der Seite durchschlagen.

Less zu CSS Compiler

Dieser Less zu CSS Compiler konvertiert Less-Quellcode direkt in Ihrem Browser mithilfe der offiziellen Less.js-Engine in Standard-CSS. Er wurde für Frontend-Entwickler, Designer, Studenten und Content-Teams entwickelt, die eine schnelle Möglichkeit benötigen, Variablen, Mixins, Verschachtelungen, Arithmetik, Farbfunktionen und Mixin-Guards zu testen, ohne eine vollständige Build-Pipeline starten zu müssen.

Kurzanleitung: Fügen Sie den Less-Code auf der linken Seite ein, wählen Sie das Ausgabeformat und den Mathematik-Modus, klicken Sie auf Less kompilieren, und kopieren oder laden Sie das resultierende CSS herunter. Nutzen Sie den Reiter Less vs CSS Diff, um genau zu sehen, wie jedes Less-Feature in reines CSS übersetzt wird – ideal, um Less zu lernen oder ein bestehendes Stylesheet zu migrieren.

Bedienungsanleitung

Less-Code einfügen: Fügen Sie Ihren Less-Quellcode in den Editor auf der linken Seite ein oder klicken Sie auf ein Schnellstarter-Beispiel (Design-Tokens, Mixin-Bibliothek, Mathematik & Einheiten, Farbfunktionen oder Mixin-Guards).
Kompilierungsoptionen wählen: Wählen Sie das Ausgabeformat (Erweitert für gute Lesbarkeit, Komprimiert für minifizierten Code) und passen Sie den Mathematik-Modus oder die Option Strikte Einheiten an, falls Ihr Code dies erfordert.
Less kompilieren: Klicken Sie auf Less kompilieren, um die offizielle Less.js-Engine direkt in Ihrem Browser auszuführen. Wenn die Live-Kompilierung aktiviert ist, aktualisiert sich das Ergebnis automatisch während der Eingabe.
Das CSS überprüfen: Lesen Sie das generierte CSS, prüfen Sie die Kompilierungsmetriken (Zeilen, Ausgabegröße, Regelblöcke, Größenverhältnis), öffnen Sie die Diff-Ansicht und überprüfen Sie den isolierten Live-Vorschau-Frame.
Kopieren oder herunterladen: Kopieren Sie das kompilierte CSS mit einem Klick in Ihre Zwischenablage oder laden Sie es als versandfertige .css-Datei herunter.

Was diesen Less-Compiler besonders macht

Animierte Kompilierungs-Pipeline: Verfolgen Sie visuell, wie Ihr Quellcode die Phasen Parse → Auswerten → CSS durchläuft, wobei die aktive Stufe in Echtzeit hervorgehoben und fehlerhafte Stufen rot markiert werden.
Nebeneinander-Diff-Ansicht: Wechseln Sie vom rohen CSS zu einem Less-vs-CSS-Layout, das präzise zeigt, welche Less-Features (Variablen, Mixins, Mathematik, Farbfunktionen) welche CSS-Regeln erzeugt haben.
Fünf kuratierte Starter-Snippets: Jedes Starter-Snippet widmet sich einem bestimmten Less-Konzept (Tokens, Mixins, Mathematik, Farbfunktionen, Mixin-Guards), sodass Sie lernen oder vergleichen können, ohne eigenen Setup-Code schreiben zu müssen.
Intelligente Warnungen: Inline-Tipps erscheinen, wenn Ihr Code @import im Browser nutzt, Divisionen ohne Klammern im Less 4 Mathematik-Modus verwendet oder Eigenschaften enthält, die in der Produktion Vendor-Präfixe benötigen könnten.
Live-Vorschau im sandboxed Frame: Das kompilierte CSS wird in einem isolierten iframe angewendet, sodass es sich niemals auf den Rest von MiniWebtool auswirkt, Sie aber dennoch eine visuelle Funktionsprüfung erhalten.
Kompilierungsmetriken mit Verhältnis: Sehen Sie nicht nur die reine Ausgabegröße, sondern auch, wie sie im Vergleich zu Ihrem Less-Quellcode abschneidet – sehr praktisch, um den Nutzen des komprimierten Modus oder von Refactorings zu bewerten.

Less vs SCSS vs CSS Spickzettel

Feature	Less	SCSS (Sass)	Reines CSS
Variable	`@brand: #6d28d9;`	`$brand: #6d28d9;`	`--brand: #6d28d9;`
Mixin	`.shadow(@c) { ... }`	`@mixin shadow($c) { ... }`	—
Mixin nutzen	`.shadow(#000);`	`@include shadow(#000);`	—
Farbfunktion	`darken(@brand, 10%)`	`darken($brand, 10%)`	`color-mix(...)`
Bedingung	Mixin-Guard `when (...)`	`@if` / `@else`	—
Mathematik	`(@base * 1.5)`	`$base * 1.5`	`calc(var(--base) * 1.5)`
Compiler	Less.js (dieses Tool)	Dart Sass, sass.js	—

Die Less-Mathematik-Modi erklärt

Less 4 hat die Art und Weise geändert, wie Arithmetik geparst wird, was Entwickler beim Migrieren älterer Snippets manchmal überrascht. Nutzen Sie den Selektor für den Mathematik-Modus im Optionsfeld:

Klammer-Division (Standard): Alle mathematischen Operationen funktionieren ohne Klammern, außer Divisionen, die zwingend in Klammern gesetzt werden müssen — zum Beispiel (@base / 2). Dies verhindert versehentliche Divisionen bei Kurzschreibweisen wie font: 10px/14px.
Immer: Das klassische Verhalten aus Less 3 — jeder Operator (einschließlich /) wird ohne Klammern ausgeführt. Wählen Sie dies, wenn Sie ältere Codebasen kompilieren.
Strikt: Nur Ausdrücke innerhalb von Klammern werden als Mathematik behandelt. Sinnvoll, wenn Sie absolut vorhersehbare Arithmetik wünschen und nicht möchten, dass Less Schätzungen anstellt.

Kombinieren Sie dies mit dem Schalter Strikte Einheiten, um Operationen zwischen inkompatiblen Einheiten (z. B. 10px + 2%) zu blockieren, was eine häufige Ursache für unbemerkt bleibende Fehler ist.

Unterstützte gängige Less-Features

Variablen: @radius: 14px;, auf die an beliebiger Stelle in der Datei verwiesen werden kann.
Verschachtelung & Eltern-Selektor: &:hover, &__badge und tief verschachtelte Regeln.
Mixins: Wiederverwendbare Blöcke wie .shadow(@color) sowie Mixin-Guards für bedingte Ausgaben.
Farbfunktionen: darken(), lighten(), fade(), spin(), mix() und viele mehr.
Mathematik: Arithmetik mit Einheiten (@gap * 1.5, @radius - 4px), gesteuert durch den Mathematik-Modus.
Schleifen & Rekursion: Rekursive Mixins zur Erstellung von Hilfsklassen oder Rasterspalten.
Funktionen: unit(), lightness(), extract(), length() und die gesamte Less-Funktionspalette.

Einschränkungen der Browser-Kompilierung

Die Kompilierung im Browser ist ideal für schnelle Überprüfungen, zum Lernen, für Prototypen und Code-Review-Snippets – allerdings kann sie nicht auf das Dateisystem Ihres Projekts zugreifen. @import-Anweisungen, die auf lokale Partials verweisen, schlagen fehl, es sei denn, Sie fügen diese Partials direkt über dem aufrufenden Code in den Editor ein. Verwenden Sie für Produktions-Releases Ihre normale Build-Pipeline, um Autoprefixing, vollständige @import-Auflösung, Source Maps und eine auf Ihren Bundler abgestimmte Minifizierung zu erhalten.

Anwendungsfälle

Migration: Einfügen von älterem Less-Code aus Bootstrap 3 oder älteren Design-Systemen und Überprüfung des kompilierten CSS, um eine Portierung zu planen.
Lernen: Durchschalten von Presets, um zu sehen, wie ein bestimmtes Less-Konzept (Mathematik, Mixin, Guard, Farbfunktion) in reines CSS übersetzt wird.
Code-Review: Schnelles Überprüfen, ob eine Less-Änderung die erwartete Ausgabe liefert, bevor ein Pull Request gemergt wird.
Dokumentation: Generieren von CSS-Beispielen für Blogposts, interne Wikis oder Komponenten-Übergaben.
Debugging: Isolieren einer fehlerhaften Less-Regel außerhalb Ihres vollständigen Builds, um zu bestätigen, ob der Fehler in Ihrem Code oder in der Toolchain liegt.

FAQ

Was ist ein Less zu CSS Compiler?

Ein Less zu CSS Compiler konvertiert Less-Quellcode (der Variablen, Mixins, Verschachtelungen und Arithmetik verwendet) in Standard-CSS, das Browser rendern können. Less selbst ist ein 2009 eingeführter CSS-Präprozessor, der in Bootstrap 3 und vielen Design-Systemen weit verbreitet ist.

Läuft der Compiler in meinem Browser?

Ja. Die offizielle Less.js-Engine wird in Ihren Browser geladen und kompiliert den Quellcode lokal. Ihr Less-Code wird bei normaler Nutzung nicht auf die Server von MiniWebtool hochgeladen.

Was ist der Unterschied zwischen Less und Sass oder SCSS?

Less verwendet das Präfix @ für Variablen (zum Beispiel @brand) und wurde ursprünglich in Ruby geschrieben und dann auf JavaScript portiert. SCSS verwendet $ für Variablen (zum Beispiel $brand) und ist Teil des Sass-Ökosystems. Beide unterstützen Verschachtelung, Mixins und Arithmetik, aber die Syntax und die Funktionsnamen unterscheiden sich. Dieses Tool kompiliert nur Less; für Sass verwenden Sie unseren SCSS zu CSS Compiler.

Kann es @import-Anweisungen verarbeiten?

Die Kompilierung im Browser kann keine privaten Projektdateien lesen. Fügen Sie die importierten Less-Partials direkt in den Editor ein, wenn Sie ein Snippet testen, das von lokalen Dateipfaden abhängt. Für eine vollständige @import-Auflösung führen Sie die Kompilierung innerhalb Ihrer Build-Pipeline aus.

Warum erhalte ich ein falsches Ergebnis bei einem mathematischen Ausdruck?

Less 4 verwendet standardmäßig die Klammer-Division und nicht-strikte Mathematik. Setzen Sie Divisionen in Klammern oder aktivieren Sie Strikte Mathematik im Optionsfeld, sodass alle arithmetischen Operationen nur innerhalb von Klammern ausgeführt werden. Die Option Strikte Einheiten blockiert Operationen zwischen inkompatiblen Einheiten wie px und %.

Ist das kompilierte CSS bereit für den Produktionseinsatz?

Das generierte CSS eignet sich hervorragend für schnelle Tests, Prototypen, zum Lernen und für kleine Snippets. Für den Produktionseinsatz sollten Sie Ihre normale Build-Pipeline ausführen, um Autoprefixing, Minifizierung, Source Maps und die vollständige @import-Auflösung zu erhalten.

Kann ich eine vollständige `.less`-Datei von meiner Festplatte kompilieren?

Ja — nutzen Sie dafür das Feld .less-Datei laden im Optionsbereich. Ihr Browser liest die Datei lokal ein und fügt den Inhalt in den Editor ein; es wird nichts hochgeladen. Wenn die Datei @import verwendet, um Partials einzubinden, fügen Sie diese Partials über dem importierenden Code ein, damit sie aufgelöst werden können.

Zitieren Sie diesen Inhalt, diese Seite oder dieses Tool als:

"Less zu CSS Compiler" unter https://MiniWebtool.com/de/less-zu-css-compiler/ von MiniWebtool, https://MiniWebtool.com/

vom MiniWebtool-Team. Aktualisiert: 2026-05-24

Less zu CSS Compiler

Less zu CSS Compiler

Bedienungsanleitung

Was diesen Less-Compiler besonders macht

Less vs SCSS vs CSS Spickzettel

Die Less-Mathematik-Modi erklärt

Unterstützte gängige Less-Features

Einschränkungen der Browser-Kompilierung

Anwendungsfälle

FAQ

Was ist ein Less zu CSS Compiler?

Läuft der Compiler in meinem Browser?

Was ist der Unterschied zwischen Less und Sass oder SCSS?

Kann es @import-Anweisungen verarbeiten?

Warum erhalte ich ein falsches Ergebnis bei einem mathematischen Ausdruck?

Ist das kompilierte CSS bereit für den Produktionseinsatz?

Kann ich eine vollständige `.less`-Datei von meiner Festplatte kompilieren?

Webmaster-Tools:

Ausgewählte Werkzeuge:

Tun Sie uns einen Gefallen und beantworten Sie 3 kurze Fragen

Less zu CSS Compiler

Less zu CSS Compiler

Bedienungsanleitung

Was diesen Less-Compiler besonders macht

Less vs SCSS vs CSS Spickzettel

Die Less-Mathematik-Modi erklärt

Unterstützte gängige Less-Features

Einschränkungen der Browser-Kompilierung

Anwendungsfälle

FAQ

Was ist ein Less zu CSS Compiler?

Läuft der Compiler in meinem Browser?

Was ist der Unterschied zwischen Less und Sass oder SCSS?

Kann es @import-Anweisungen verarbeiten?

Warum erhalte ich ein falsches Ergebnis bei einem mathematischen Ausdruck?

Ist das kompilierte CSS bereit für den Produktionseinsatz?

Kann ich eine vollständige .less-Datei von meiner Festplatte kompilieren?

Webmaster-Tools:

Ausgewählte Werkzeuge:

Tun Sie uns einen Gefallen und beantworten Sie 3 kurze Fragen

Kann ich eine vollständige `.less`-Datei von meiner Festplatte kompilieren?