CSS-Eingabe

Konvertiertes SCSS

CSS zu SCSS Beispiele

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

Verschachtelte Struktur aus flachem CSS

Eingabe CSS:

Eingabe

Konvertiertes SCSS:

Ausgabe

Nutzen Sie oben Beispiel, um weitere Beispieldaten zu laden.

Was ist CSS zu SCSS?

SCSS fügt Variablen, Verschachtelung und Mixins zu CSS hinzu. Die Konvertierung von reinem CSS zu SCSS strukturiert es mit Verschachtelung um. Dieses Tool analysiert Ihr CSS und gibt SCSS-Struktur aus. Die W3C-CSS-Spezifikationen definieren die Quelle; Sass definiert die Ausgabe.

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

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.

SCSS-Ausgabe prüfen

Das rechte Panel zeigt konvertiertes SCSS. 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 SCSS mit SCSS zu CSS zur Überprüfung. Zum Formatieren von CSS zuerst den CSS Formatierer.

Wann CSS zu SCSS hilft

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

Design-Tools wie Figma exportieren oft reines CSS. Die Konvertierung zu SCSS hier ermöglicht die Integration in eine komponentenbasierte Struktur. Für Less stattdessen CSS zu Less. 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. Komplexe Selektoren können flach bleiben. Prüfen und passen Sie bei Bedarf an.

CSS zu SCSS vs CSS zu Less?

Beide erzeugen Preprocessor-Syntax. SCSS ist weiter verbreitet (Bootstrap 4+, viele Frameworks). Less wird von Bootstrap 3, Ant Design genutzt. Wählen Sie basierend auf Ihrem Stack.

Kann ich die Ausgabe kompilieren?

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

CSS zu SCSS Konverter