SCSS online zu CSS kompilieren – Browser-SCSS-Compiler

Kompilieren Sie SCSS zu Standard-CSS mit Dart Sass in Ihrem Browser. Ausgabestil, Source Maps und Deprecation-Warnungen sind konfigurierbar — 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

• Nur SCSS-Syntax — eingerückte .sass-Dateien werden nicht unterstützt. • Externe @import / @use (node_modules, CDN, andere Dateien) können im Browser nicht aufgelöst werden — fügen Sie den gesamten Code in den Editor ein. • Auto-Kompilierung beim Einfügen und Laden von Beispielen; getippte Änderungen erfordern Kompilieren (⌘↵). • Source Maps werden als data:-URI-Kommentar in der CSS-Ausgabe inline eingebettet. • Kombinieren Sie mit beautify-scss oder minify-css für die vollständige Pipeline.

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?

Dieses Tool läuft vollständig in Ihrem Browser ohne Dateisystemzugriff. @import- oder @use-Pfade, die auf node_modules, CDNs oder andere Projektdateien zeigen, können nicht aufgelöst werden. Fügen Sie den vollständigen SCSS-Code, den Sie benötigen, in den Editor ein.

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

Nein — nur SCSS-Geschweifte-Klammer-Syntax (.scss) wird unterstützt. Eingerückte .sass-Dateien liegen außerhalb des Umfangs.

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.

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.

LESS zu CSS kompilieren

Weitere Werkzeugkategorien entdecken

Minimieren

Verkleinern Sie Code und Ressourcen für die Produktion – minimieren Sie JavaScript, CSS, HTML, JSON und XML vor der Bereitstellung von gzip oder CDN.

Verschönern

Machen Sie Code mit konsistenter Einrückung lesbar – verschönern Sie JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML und mehr in Ihrem Browser.

Aufheben

Erweitern Sie minimierten oder komprimierten Code – entminifizieren Sie JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML und andere Formate beim Debuggen oder Überprüfen.

Konvertierung

Transformieren Sie Daten zwischen JSON, YAML, XML und CSV lokal – keine Server-Uploads.

JSON Werkzeuge

Validieren, formatieren, vergleichen und erkunden Sie JSON-Nutzlasten – ergänzend zu Minifiern und Konvertern.

SVG Werkzeuge

Vorschau anzeigen, mit SVGO optimieren, Daten exportieren URI, Größe ändern, verschönern, in JSX konvertieren und SVG validieren – alles in Ihrem Browser.

DevOps und Infrastruktur

Terraform HCL formatieren/validieren/minimieren, Dockerfile formatieren und lint, Docker Verfassen und .env-Validierung.

CI/CD

GitHub Aktionen und GitLab CI – formatieren Sie YAML und überprüfen Sie die Workflow-/Auftragsstruktur in Ihrem Browser.

Protokolle und Beobachtbarkeit

Zeilenorientierte JSON/NDJSON- und Nginx/Apache-Zugriffsprotokolle – formatieren, filtern, validieren und CSV/TSV.

Kubernetes

Multi-Doc-Manifeste, strukturelle Validierung, Ingress/Deployment-Starter und Helm-Werteformatierung.

Netzwerk / IP

CIDR, Subnetze und IPv4/IPv6-Helfer — im Browser.

Sicherheit und Token

JWKS, X.509-Zertifikate und Secrets-Scan – browserlokal.

API & Schemata

OpenAPI Tools zum Formatieren, Validieren und Flusen Ihrer Spezifikationen.

Codierung

Kodieren oder dekodieren Sie Base64-, URL-Komponenten und HTML-Entitäten – nur clientseitig.

Entwickler-Dienstprogramme

Zeitstempel, UUID, ULID, Nanoid, Cron, Passwörter, Regex, Slugify, Zahlenbasen, Groß-/Kleinschreibung, Textunterschied und chmod – alles clientseitig.

Text & Markdown

Wörter zählen, Markdown-TOC erzeugen und Zeilenlisten bereinigen — im Browser.

Serialisierung

Serialisieren und deserialisieren Sie PHP-Datenstrukturen neben JSON-Workflows.