SCSS zu CSS Konverter
SCSS/SASS-Code in CSS konvertieren
SCSS-Eingabe
Kompiliertes CSS
SCSS zu CSS Beispiele
SCSS-Variablen und Verschachtelung kompilieren zu reinem CSS. Beispiel:
Variablen und verschachtelte Selektoren
Eingabe SCSS:
Kompiliertes CSS:
Nutzen Sie oben Beispiel, um weitere Beispieldaten zu laden.
Was ist SCSS zu CSS?
SCSS (Sassy CSS) ist ein CSS-Preprocessor mit Variablen, Verschachtelung, Mixins und mehr. Browser führen kein SCSS aus—sie brauchen reines CSS. Dieses Tool kompiliert Ihr SCSS (oder SASS) in browserfertiges CSS. Die Sass-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 SCSS) nutzen Sie CSS zu SCSS. Für Less Less zu CSS.
So verwenden Sie dieses Tool
SCSS einfügen oder hochladen
Kopieren Sie Ihr SCSS oder SASS und fügen Sie es in den linken Editor ein. Sie können auch auf Hochladen klicken, um eine .scss- oder .sass-Datei zu laden. Die Schaltfläche Beispiel lädt Beispieldaten. Ungültiges SCSS 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 SCSS zu CSS hilft
Wenn Sie SCSS aus einem Projekt, Design-System oder Legacy-Codebase haben, aber reines CSS brauchen—für einen Schnelltest, E-Mail-Vorlage oder System ohne Build-Tools—hilft diese Kompilierung. Frameworks wie Bootstrap und Foundation nutzen SCSS. Für Produktions-Builds kompilieren Dart Sass und webpack SCSS. Auch nützlich zum Debuggen: sehen Sie genau, welches CSS Ihr SCSS erzeugt.
Viele Frameworks (Bootstrap, Foundation) nutzen SCSS. Wenn Sie Variablen anpassen oder Styles extrahieren, liefert die Kompilierung hier das finale CSS. Zum Konvertieren von bestehendem CSS in SCSS-Struktur nutzen Sie CSS zu SCSS.
Häufig gestellte Fragen
SCSS vs SASS?
SCSS nutzt geschweifte Klammern wie CSS. SASS nutzt Einrückung (keine Klammern). Beide kompilieren zum gleichen CSS. Dieses Tool unterstützt beide Syntaxen.
Unterstützt es @import?
Partielle Imports werden möglicherweise nicht aufgelöst, wenn Dateien nicht hochgeladen sind. Für Mehrdateien-Projekte nutzen Sie ein Build-Tool wie Dart Sass oder Ihren Bundler. Siehe Sass CLI.
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 Funktionen werden während der Kompilierung expandiert. Das Ausgabe-CSS enthält die aufgelösten Werte. Komplexe Funktionen werden innerhalb der Compiler-Fähigkeiten unterstützt.
Kann ich es mit Bootstrap nutzen?
Bootstrap-SCSS hat viele Partials und Variablen. Für die vollständige Bootstrap-Kompilierung nutzen Sie den offiziellen Build oder npm. Dieses Tool funktioniert für Einzeldateien-SCSS oder Snippets.
Verwandte Tools
Für Sass/SCSS: sass-lang.com und Sass-Dokumentation. MDN CSS und W3C CSS definieren das Ausgabeformat.