CSS-Eingabe

Konvertiertes Less

CSS zu Less Beispiele

Flache CSS-Selektoren werden in verschachteltes Less konvertiert. Beispiel:

Verschachtelte Struktur aus flachem CSS

Eingabe CSS:

Eingabe

Konvertiertes Less:

Ausgabe

Nutzen Sie oben Beispiel, um weitere Beispieldaten zu laden.

Was ist CSS zu Less?

Less ist ein CSS-Preprocessor mit Variablen, Verschachtelung und Mixins. Die Konvertierung von reinem CSS zu Less strukturiert es mit Verschachtelung um. Dieses Tool analysiert Ihr CSS und gibt Less-Struktur aus. Die W3C-CSS-Spezifikationen definieren die Quelle; Less definiert die Ausgabe.

Die Konvertierung läuft vollständig in Ihrem Browser. Nichts wird an einen Server gesendet. Die Ausgabe ist gültiges Less. Für die Umkehrung (Less zu CSS) nutzen Sie Less zu CSS. Für SCSS CSS zu SCSS.

So verwenden Sie dieses Tool

CSS einfügen oder hochladen

Kopieren Sie Ihr CSS und fügen Sie es in den linken Editor ein. Sie können auch auf Hochladen klicken, um eine .css-Datei zu laden. Die Schaltfläche Beispiel lädt Beispieldaten. Ungültiges CSS zeigt einen Fehler.

Less-Ausgabe prüfen

Das rechte Panel zeigt konvertiertes Less. Selektoren können verschachtelt werden, wo die Struktur es erlaubt. Sie können Variablen und Mixins manuell nach der Konvertierung hinzufügen.

Kopieren oder Herunterladen

Nutzen Sie Kopieren oder Herunterladen. Kompilieren Sie das Less mit Less zu CSS zur Überprüfung. Zum Formatieren von CSS zuerst den CSS Formatierer.

Wann CSS zu Less hilft

Bei der Migration eines Projekts von reinem CSS zu Less oder wenn Sie CSS aus einem Design-Export haben und es in eine Less-basierte Codebase integrieren möchten (z. B. Bootstrap 3, Ant Design), bietet diese Konvertierung einen Ausgangspunkt. Build-Tools wie webpack und Gulp kompilieren Less. Die Ausgabe liefert verschachtelte Struktur, die Sie mit Variablen und Mixins verfeinern können.

Design-Tools exportieren oft reines CSS. Die Konvertierung zu Less hier ermöglicht die Integration in eine komponentenbasierte Struktur. Für SCSS stattdessen CSS zu SCSS. Für Vendor-Prefixes den CSS Prefixer.

Häufig gestellte Fragen

Fügt es Variablen oder Mixins hinzu?

Der Konverter konzentriert sich auf Struktur (Verschachtelung). Er extrahiert keine wiederholten Werte automatisch in Variablen. Fügen Sie Variablen und Mixins manuell nach Bedarf hinzu.

Sind meine Daten privat?

Ja. Die Konvertierung läuft vollständig in Ihrem Browser. Keine Daten werden an einen Server gesendet.

Wie funktioniert die Verschachtelung?

Das Tool leitet Verschachtelung aus Selektorenbeziehungen ab (z. B. .parent .child wird verschachtelt). Komplexe Selektoren können flach bleiben. Prüfen und passen Sie bei Bedarf an.

Less vs SCSS?

Beide fügen Variablen, Verschachtelung und Mixins hinzu. Less wird von Bootstrap 3, Ant Design genutzt. SCSS von Bootstrap 4+, vielen modernen Frameworks. Wählen Sie basierend auf Ihrem Stack.

Kann ich die Ausgabe kompilieren?

Ja. Fügen Sie das Less in Less zu CSS ein, um zu kompilieren und zu überprüfen. Die Ausgabe sollte Ihrer ursprünglichen CSS-Struktur entsprechen.

CSS zu Less Konverter