SCSS online zu CSS kompilieren – Dart Sass im Browser

Kompilieren Sie ein SCSS-Snippet oder bündeln Sie einen lokalen Projektordner mit nativer @use- und @import-Auflösung. Ausgabestil, Source-Maps für Einzeldateien und Deprecation-Warnungen sind konfigurierbar, und nichts wird hochgeladen.

Laden…
SCSS-Compiler – Browser-Leitfaden
Kompilieren Sie SCSS-Snippets zu Standard-CSS vor dem Minifizieren oder Teilen. Ideal, wenn die Sass-CLI nicht installiert ist oder Sie eine schnelle Vorschau brauchen.

Entwicklerhinweise

Der Einzeldatei-Editor verwendet SCSS-Syntax; Projekt-Bundles akzeptieren auch eingerückte .sass-Dateien. Legen Sie einen Projektordner ab, um lokale @import- und @use-Pfade aufzulösen. node_modules, Pakete und entfernte URLs werden nicht aufgelöst. Auto-Kompilierung beim Einfügen und Laden von Beispielen; getippte Änderungen erfordern Kompilieren (⌘↵). Source-Maps sind für Einzeldateien verfügbar und im Bundle-Modus v1 nicht verfügbar. Kombinieren Sie mit beautify-scss oder minify-css für die vollständige Pipeline.

Lokale Partials bündeln

Wählen Sie Projekt bündeln, legen Sie einen Ordner ab und bestimmen Sie eine Einstiegsdatei. FastMinify erhält relative Pfade, während Dart Sass erreichbare .scss- und .sass-Partials über @use oder @import findet. Das browserlokale Limit beträgt 32 MiB pro Datei und insgesamt. Version 1 unterstützt einen Einstieg, keine Source-Maps und keine node_modules-Pakete.

Optionen

Ausgabestil
Steuert die CSS-Formatierung: expanded (lesbar), compressed (minifiziert), compact oder nested.
Source Map
Fügt der CSS-Ausgabe einen Inline-data:-URI-sourceMappingURL-Kommentar zum Debuggen hinzu.
Deprecation-Warnungen ausblenden
Blendet Sass-Deprecation-Warnungen in der Konsole für Legacy-Built-in-Funktionen aus.

Wann Teams diesen Weg wählen

Ein SCSS-Snippet aus Design-System-Dokumentation in plain CSS umwandeln. Compressed-Ausgabe vor dem Einfügen in ein CMS ansehen. SCSS-Variablen und Verschachtelung mit sofortigem CSS-Feedback lehren. Mixins prototypen, ohne Dart Sass lokal zu installieren.

Ausgearbeitete Beispiele

Variablen und Verschachtelung

SCSS-Eingabe

$brand: #336699; $spacing: 8px; .card { padding: $spacing; .title { color: $brand; } }

Kompiliertes CSS

.card { padding: 8px; } .card .title { color: #336699; }

Mixin mit Parametern

SCSS-Eingabe

@mixin rounded($radius: 4px) { border-radius: $radius; } .btn { @include rounded(8px); background: #eee; }

Kompiliertes CSS

.btn { border-radius: 8px; background: #eee; }

Verwandte Tools

Verschönern Sie SCSS mit SCSS verschönern, dekomprimieren Sie mit SCSS entminifizieren, oder durchsuchen Sie den CSS-Präprozessoren-Hub.

SCSS-Compiler FAQ

Nur Browser-Kompilierung

Warum kann ich @import für externe Bibliotheken nicht verwenden?

Projekt-Bundles lösen lokale Dateien auf, die Sie im Browser ablegen. Pfade zu node_modules, Paketen, CDNs oder außerhalb des abgelegten Ordners sind nicht verfügbar.

Unterstützt es die eingerückte SASS-Syntax?

Der Einzeldatei-Editor verwendet SCSS-Geschweifte-Klammer-Syntax. Der Projektmodus akzeptiert auch .sass-Dateien mit eingerückter Syntax.

Wann läuft die Kompilierung automatisch?

Beim Einfügen und beim Laden eines Beispiels. Beim Tippen verwenden Sie die Schaltfläche Kompilieren oder ⌘↵ — Live-Kompilierung bei jedem Tastendruck ist absichtlich deaktiviert.

Ist ein Projekt-Bundle dasselbe wie Dateiverkettung?

Nein. Dart Sass beginnt mit einer Einstiegsdatei und löst nur erreichbare @use- und @import-Abhängigkeiten auf. Es gibt keine manuelle Dateireihenfolge. Version 1 ist auf einen Einstieg und 32 MiB insgesamt begrenzt, ohne Source-Maps oder npm-Paketimporte.

CSS-Präprozessoren

Kompilieren Sie SCSS oder LESS zu Standard-CSS im Browser — kombinieren Sie mit Beautify oder Minify für einen vollständigen Stylesheet-Workflow.

Weitere Werkzeugkategorien entdecken