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 — nichts wird hochgeladen.
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
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
Kompiliertes CSS
Mixin mit Parametern
SCSS-Eingabe
Kompiliertes CSS
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
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.
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.
Codierung
Kodieren oder dekodieren Sie Base64-, URL-Komponenten und HTML-Entitäten – nur clientseitig.
Serialisierung
Serialisieren und deserialisieren Sie PHP-Datenstrukturen neben JSON-Workflows.
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.
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.
Farb- & CSS-Tools
Lokal eingefügte WCAG-Kontrastprüfung mit moderner CSS-Farbsyntax — Paar- und Matrixansicht, nie hochgeladen.
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.
HTTP-Tools
cURL, HTTP-Nachrichten, URLs, HAR und Cookie/Set-Cookie lokal einfügen — formatieren und prüfen, nie gesendet.
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.
KI & LLM
Token-Zählung, Kostenschätzung und Kontextfenster — 100 % im Browser.
Testdaten
Synthetische Feldwerte für Fixtures und DB-Seed — zuerst reservierte Telefonnummern.