Less zu CSS Konverter
Less-Code in browserfertiges CSS konvertieren
Less-Eingabe
Kompiliertes CSS
Less zu CSS Beispiele
Less-Variablen, Mixins und Verschachtelung kompilieren zu reinem CSS. Beispiel:
Variablen, Mixins und verschachtelte Selektoren
Eingabe Less:
Kompiliertes CSS:
Nutzen Sie oben Beispiel, um weitere Beispieldaten zu laden.
Was ist Less zu CSS?
Less ist ein CSS-Preprocessor mit Variablen, Verschachtelung, Mixins und Funktionen. Browser führen kein Less aus—sie brauchen reines CSS. Dieses Tool kompiliert Ihr Less in browserfertiges CSS. Die Less-Dokumentation definiert die Syntax.
Die Kompilierung läuft vollständig in Ihrem Browser. Nichts wird an einen Server gesendet. Die Ausgabe ist Standard-CSS. Für die Umkehrung (CSS zu Less) nutzen Sie CSS zu Less. Für SCSS SCSS zu CSS.
So verwenden Sie dieses Tool
Less einfügen oder hochladen
Kopieren Sie Ihr Less und fügen Sie es in den linken Editor ein. Sie können auch auf Hochladen klicken, um eine .less- oder .css-Datei zu laden. Die Schaltfläche Beispiel lädt Beispieldaten. Ungültiges Less zeigt einen Fehler.
Kompiliertes CSS anzeigen
Das rechte Panel zeigt das kompilierte CSS. Variablen werden aufgelöst, Verschachtelung wird abgeflacht, Mixins werden expandiert. Die Ausgabe ist reines CSS für jeden Browser.
Kopieren oder Herunterladen
Nutzen Sie Kopieren oder Herunterladen. Zum Formatieren der Ausgabe den CSS Formatierer. Zum Minimieren den CSS Minimierer.
Wann Less zu CSS hilft
Wenn Sie Less aus einem Projekt (z. B. Bootstrap 3, Ant Design) oder Legacy-Codebase haben, aber reines CSS brauchen—für einen Schnelltest, CDN-Deployment oder System ohne Build-Tools—hilft diese Kompilierung. Auch nützlich zum Debuggen: sehen Sie genau, welches CSS Ihr Less erzeugt.
Less wird von vielen älteren Projekten und einigen UI-Frameworks genutzt. Wenn Sie Variablen anpassen oder Styles extrahieren, liefert die Kompilierung hier das finale CSS. Zum Konvertieren von bestehendem CSS in Less-Struktur nutzen Sie CSS zu Less.
Häufig gestellte Fragen
Less vs SCSS?
Beide fügen Variablen, Verschachtelung und Mixins hinzu. Less nutzt & für Parent-Selektoren; SCSS ebenfalls. Die Syntax unterscheidet sich leicht. Wählen Sie basierend auf Ihrem Projekt.
Unterstützt es @import?
Imports werden möglicherweise nicht aufgelöst, wenn Dateien nicht hochgeladen sind. Für Mehrdateien-Projekte nutzen Sie den offiziellen Less-Compiler oder Ihren Bundler.
Sind meine Daten privat?
Ja. Die Kompilierung läuft vollständig in Ihrem Browser. Keine Daten werden an einen Server gesendet.
Was ist mit Mixins und Funktionen?
Mixins und eingebaute Funktionen (z. B. <code>lighten()</code>, <code>darken()</code>) werden während der Kompilierung expandiert. Das Ausgabe-CSS enthält die aufgelösten Werte.
Kann ich es mit Bootstrap 3 nutzen?
Bootstrap 3 nutzt Less. Für die vollständige Bootstrap-Kompilierung nutzen Sie den offiziellen Build. Dieses Tool funktioniert für Einzeldateien-Less oder Snippets.
Verwandte Tools
Für Less: lesscss.org und Less-Nutzung. MDN CSS und W3C CSS definieren das Ausgabeformat.