devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Website-Check

SCSS zu CSS Compiler — Sass Online

Füge SCSS oder eingerücktes Sass ein und erhalte reines CSS, kompiliert von der offiziellen Dart-Sass-Engine direkt in deinem Browser – mit klaren Fehlermeldungen, die auf die genaue Zeile zeigen.

Aktualisiert am
Syntax
Ausgabe

Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

So nutzt du: SCSS zu CSS Compiler

  1. Füge dein SCSS ein – oder wechsle zur eingerückten Sass-Syntax.
  2. Das CSS wird beim Tippen kompiliert; Fehler zeigen Zeile und Spalte.
  3. Wähle die Ausgabe ausgeschrieben oder minifiziert und kopiere oder lade das CSS herunter.

Was der Compiler kann

Hier läuft Dart Sass, die Referenzimplementierung von Sass, direkt in deinem Browser. Alles aus der Sprache funktioniert: Variablen, Verschachtelung mit &, Mixins und @include, @extend, Funktionen, Maps, Schleifen, @if-Bedingungen sowie das Modulsystem mit @use für die eingebauten Module wie sass:math und sass:color.

SCSS vs. eingerücktes Sass

SCSS ist eine Obermenge von CSS mit geschweiften Klammern und Semikolons – jedes gültige CSS ist also auch gültiges SCSS. Die ältere eingerückte Syntax (.sass-Dateien) verzichtet auf Klammern und Semikolons und nutzt stattdessen Einrückungen und Zeilenumbrüche. Beide werden zu demselben CSS kompiliert; nimm einfach die Variante, die deine Dateien verwenden.

Importe anderer Dateien

Ein Browser kann die übrigen Dateien deines Projekts nicht lesen. Deshalb funktionieren @use "variables" oder @import "mixins" mit eigenen Partials hier nicht. Füge den Inhalt der Partials einfach oberhalb des Codes ein, der sie benötigt. Deprecation-Warnungen von Sass – zum Beispiel für darken() – werden unter der Ausgabe mit dem empfohlenen Ersatz angezeigt.

Privat by Design

Die Kompilierung läuft vollständig in deinem Browser – dein Code wird nie hochgeladen und ist daher auch für proprietäre Projekte unbedenklich.

Auch gesucht als: scss zu css, sass zu css, scss compiler online, sass compiler online, scss in css umwandeln, sass online kompilieren, scss converter.

Passende Tools zu: SCSS zu CSS Compiler

  • LESS zu CSS Compiler — Füge deinen Less-Code ein und erhalte reines CSS, kompiliert von der offiziellen Less.js-Engine direkt in deinem Browser.
  • CSS Formatter — Verwandle ein minifiziertes Stylesheet in gut lesbares CSS mit einer Eigenschaft pro Zeile und sauber verschachtelten @media-Blöcken.
  • CSS Minifier — Füge ein Stylesheet ein, um es sofort zu verkleinern.
  • CSS zu Tailwind Converter — Füge CSS-Regeln oder Deklarationen ein und erhalte für jeden Selektor die passenden Tailwind-Utility-Klassen, inklusive hover:-Zuständen und beliebigen Werten wie p-[13px].

Häufige Fragen

Ist das der echte Sass-Compiler?
Ja – Dart Sass, die offizielle Implementierung, kompiliert nach JavaScript. Sie erzeugt dasselbe CSS wie der sass-Befehl in der Kommandozeile.
Kann ich CSS in SCSS umwandeln?
Jedes CSS ist bereits gültiges SCSS, du kannst die Datei also einfach von .css in .scss umbenennen. Verschachtelung und Variablen ergänzt du beim Umbau von Hand.
Warum sehe ich Deprecation-Warnungen?
Sass fasst globale Funktionen wie darken() und @import nach und nach zusammen. Die Warnung zeigt den modernen Ersatz, zum Beispiel color.adjust() und @use.
Kann ich SCSS zu CSS Compiler als Web-App installieren und offline nutzen?
Ja. SCSS zu CSS Compiler ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

Ähnliche Tools

localLESS zu CSS CompilerFüge deinen Less-Code ein und erhalte reines CSS, kompiliert von der offiziellen Less.js-Engine direkt in…localCSS FormatterVerwandle ein minifiziertes Stylesheet in gut lesbares CSS mit einer Eigenschaft pro Zeile und sauber…localCSS MinifierFüge ein Stylesheet ein, um es sofort zu verkleinern. Du siehst die Originalgröße und die minifizierte…localCSS zu Tailwind ConverterFüge CSS-Regeln oder Deklarationen ein und erhalte für jeden Selektor die passenden…localHTML zu JSX KonverterFüge HTML ein – ein Snippet, ein Template oder ein SVG-Icon – und erhalte JSX, das du direkt in eine…localCSS-Animation-GeneratorGestalte CSS-Animationen auf einer echten Keyframe-Timeline. Starte mit über 50 Vorlagen, springe durch…