LESS in CSS umwandeln

So funktioniert es

Ein älteres Bootstrap-3-Theme oder eine WordPress-Vorlage ist oft in LESS geschrieben, und Browser können LESS nicht lesen: Es muss zuerst in normales CSS kompiliert werden. Fügen Sie den Code links ein. Rechts sind Variablen wie @hauptfarbe danach durch ihre Werte ersetzt, Mixin-Aufrufe wie .schatten(8px) durch die Regeln, die sie enthalten, verschachtelte Regeln zu Selektoren wie .karte h2 aufgelöst und Farbfunktionen wie darken(@hauptfarbe, 10%) zu einem Farbcode wie #08427d berechnet. Auch Rechnungen wie (@abstand / 2) werden ausgeführt: Die Hälfte von 16px ergibt 8px. Die lesbare Ausgabe ist mit 2 Leerzeichen eingerückt; mit Minimiert fallen Leerraum und Kommentare weg, das CSS steht in einer Zeile. Verwendet der Code eine undefinierte Variable oder bleibt eine geschweifte Klammer offen, wird nichts kompiliert, und Sie sehen Zeile und Spalte des Problems. Die Ergebniszeile nennt, aus wie vielen Zeilen LESS wie viele Zeilen CSS wurden, und die Größe in Byte. Inhalte, die per @import aus einer anderen Datei kommen, erreichen diese Seite nicht; fügen Sie deren Text ebenfalls ein.

Dieses Werkzeug ist auch als less in css umwandeln, less to css, less compiler online, less kompilieren online, less css konverter, lessc online bekannt.

Was ist LESS?

LESS (Leaner Style Sheets) ist eine Präprozessor-Sprache, die CSS um Variablen, Mixins, verschachtelte Regeln und Farbfunktionen erweitert. Sie erschien 2009; Bootstrap 3 und tausende darauf aufbauende Themes wurden in LESS geschrieben. Browser lesen .less-Dateien nicht direkt; ein Compiler ersetzt Variablen durch ihre Werte, löst verschachtelte Regeln auf und erzeugt eine normale .css-Datei.

Was ist Mixin?

Ein Mixin ist in LESS eine benannte Gruppe von Regeln, die Sie in anderen Regeln wiederverwenden: .schatten(@tiefe) { box-shadow: ... } wird einmal geschrieben und dann mit .karte { .schatten(8px); } aufgerufen. Beim Kompilieren wird der Aufruf durch die Eigenschaften im Mixin ersetzt, gefüllt mit den übergebenen Werten. So müssen Sie denselben Schatten nicht zehnmal schreiben.

Was ist der Unterschied zwischen LESS und SCSS?

Beide sind Präprozessoren, die CSS um Variablen, Mixins und verschachtelte Regeln erweitern, und leisten dasselbe; der Unterschied liegt in Syntax und Umfeld. LESS schreibt Variablen mit @ (@farbe), SCSS mit $ ($farbe). In LESS wird ein Mixin wie eine normale Klasse aufgerufen (.schatten();), in SCSS braucht es @mixin und @include. Bootstrap 3 nutzte LESS, ab Bootstrap 4 kam SCSS; deshalb begegnet Ihnen LESS heute vor allem in älteren Themes und Projekten.

Warum werden meine @import-Dateien nicht kompiliert?

Diese Seite kompiliert nur den eingefügten Text; andere Dateien auf Ihrem Computer oder einem Server kann sie nicht lesen, weil Ihr Code nirgendwohin gesendet wird. Deshalb meldet eine Zeile wie @import "variablen.less" den Fehler, dass die Datei nicht gelesen werden kann. Die Lösung: Kopieren Sie den Inhalt der importierten Datei und setzen Sie ihn anstelle der @import-Zeile ein. Für ein Projekt aus vielen Dateien wie Bootstrap verwenden Sie den Build-Befehl des Projekts (lessc).

Ein CSS-Import mit url(...), etwa eine Google-Fonts-Adresse, wird nicht kompiliert, aber unverändert in die Ausgabe übernommen; der Browser lädt ihn beim Öffnen der Seite. Inline-JavaScript (Ausdrücke in Backticks) ist in less 4 standardmäßig aus und läuft auch hier nicht.

Lesbar oder minimiert?

Die lesbare Ausgabe passt, wenn Sie das kompilierte CSS prüfen, die Herkunft einer Regel sehen oder LESS hinter sich lassen und mit normalem CSS weiterarbeiten wollen. Die minimierte Ausgabe ist für die Datei auf der Live-Seite: Leerraum und Kommentare entfallen, die Datei wird kleiner.

Wenn Sie von LESS weggehen, nehmen Sie die lesbare Ausgabe. Werte ersetzen dann die Variablen; eine Farbe später zu ändern heißt, mehrere Zeilen anzufassen. CSS-Variablen (--hauptfarbe) sind dafür ein guter Ersatz.

• Kompilierten Code ansehen, von LESS auf normales CSS wechseln → Lesbar
• Hochladen auf die Live-Seite → Minimiert
• Bootstrap-Projekt mit vielen Dateien → lessc-Befehl des Projekts

Häufige Fragen

Wie wandle ich eine LESS-Datei in CSS um?

Kopieren Sie den Inhalt der .less-Datei und fügen Sie ihn links auf dieser Seite ein. Rechts erscheint das kompilierte CSS; Sie können es kopieren oder als .css-Datei herunterladen. Importiert die Datei weitere .less-Dateien, fügen Sie deren Inhalt ebenfalls ein.

Was bedeutet „Variable ist nicht definiert“?

Eine im Code verwendete @Variable ist im selben Text nirgends festgelegt. Meist stehen Variablen in einer eigenen Datei (etwa variables.less), die per @import geladen wird; fügen Sie deren Inhalt ein, dann verschwindet der Fehler.

Kann ich auch SCSS oder Sass kompilieren?

Nein. SCSS hat eine andere Syntax ($variable, @include) und braucht einen anderen Compiler. Diese Seite kompiliert nur LESS; wenn Sie SCSS nur einrücken möchten, erledigt das das Werkzeug CSS formatieren.

Wird mein Code an einen Server geschickt?

Nein. Das Kompilieren läuft vollständig in Ihrem Browser; der eingefügte Code verlässt diese Seite nicht und wird nirgends gespeichert.