Sass zu CSS
Sass und SCSS online zu CSS kompilieren. Echtzeit-Umwandlung mit erweitertem oder komprimiertem Output, Fehlerzeilen und voller Unterstützung für Variablen, Mixins und Verschachtelung.
Was ist der Unterschied zwischen Sass und SCSS?
SCSS ist die neuere, CSS-ähnliche Syntax mit geschweiften Klammern und Semikolons. Sass (die eingerückte Syntax) nutzt Einrückung und Zeilenumbrüche. Dieses Tool kompiliert beides - wähle einfach die Syntax im Dropdown.
Welche Sass-Features werden unterstützt?
Der Compiler nutzt die offizielle Dart-Sass-Engine: Variablen, Verschachtelung, Mixins, @include, Funktionen, @use, @extend, Kontrollanweisungen wie @if und @each sowie der komprimierte Ausgabestil werden unterstützt.
Wie erhalte ich komprimiertes CSS?
Stelle das Ausgabe-Stil-Dropdown vor dem Kompilieren auf Komprimiert. Leerzeichen und das letzte Semikolon werden entfernt - so entsteht das kleinstmögliche Stylesheet.
Warum zeigt der Fehler eine Zeilennummer?
Bei einem Syntaxfehler meldet die Sass-Engine die exakte Zeile und Spalte des Fehlers, und das Tool zeigt sie über dem Output an, damit du schnell korrigieren kannst.
Wird mein Sass-Code auf einen Server hochgeladen?
Nein. Die komplette Dart-Sass-Engine ist in die Seite eingebettet und kompiliert lokal im Browser. Deine Stylesheets verlassen dein Gerät nie - sicher auch für private Projekte.
Kann ich @import von lokalen Dateien kompilieren?
Nein. Der Compiler arbeitet mit einem einzelnen Snippet im Speicher und hat keinen Zugriff auf dein Dateisystem, daher können dateibasierte Imports und @use externer Partials nicht aufgelöst werden.
Funktioniert es offline?
Ja. Nachdem Seite und Compiler-Paket einmal geladen sind, läuft die Kompilierung vollständig auf deinem Rechner - ohne Verbindung.
Wie verwende ich das Ergebnis?
Kopiere das kompilierte CSS in die Zwischenablage oder lade es als style.css über die Buttons unter dem Output herunter, und binde es in dein HTML ein oder füge es in dein Stylesheet ein.
So verwenden Sie Sass zu CSS
Dieser Compiler führt die offizielle Dart-Sass-Engine vollständig in deinem Browser aus. Füge SCSS oder eingerücktes Sass ein und erhalte sofort sauberes CSS — Variablen, Mixins, Verschachtelung und Funktionen werden unterstützt, nichts wird hochgeladen.
- Füge dein Sass oder SCSS in das Eingabefeld ein, oder klicke auf Beispiel, um eine lauffähige Demo mit Variable und Mixin zu laden.
- Wähle in den Dropdown-Menüs die Syntax (SCSS oder eingerücktes Sass) und den Ausgabe-Stil (Expanded oder Compressed).
- Bei aktiver Live-Kompilierung entsteht das CSS beim Tippen; andernfalls klicke zum manuellen Ausführen auf Kompilieren.
- Bei einem Syntaxfehler erscheinen die genaue Zeilennummer und die Meldung über der Ausgabe, damit du schnell beheben kannst.
- Mit Kopieren oder Herunterladen unter der Ausgabe holst du dein kompiliertes Stylesheet als style.css.
Wähle den Ausgabe-Stil Compressed, um dein Stylesheet zu minifizieren — ideal für Produktions-Builds direkt aus der Quelle.
Verwandte Tools
- CSS Beautifier CSS-Code sofort formatieren und verschönern. Minifiziertes CSS in lesbaren, gut eingerückten Code umwandeln mit anpassbaren Optionen.
- CSS Minifier Kostenloser Online-CSS-Minifier. Komprimieren und optimieren Sie CSS-Code sofort durch Entfernen von Leerzeichen, Kommentaren und unnötigen Zeichen. Reduzieren Sie die Dateigröße für schnellere Webperformance.
- CSS-Gradient-Generator Erstellen Sie visuell atemberaubende CSS-Gradienten. Generieren Sie lineare, radiale und konische Gradienten mit mehreren Farbstops, Winkeln und Positionen. Kopieren Sie produktionsreifen CSS-Code sofort.
- CSS Flexbox-Generator Visueller CSS Flexbox-Generator mit Live-Vorschau. Passen Sie Flex-Eigenschaften an und erhalten Sie sofort einsatzbereiten CSS-Code.
- Chmod-Rechner Kostenloser Online-Chmod-Rechner zur Visualisierung und Berechnung von Linux-Dateiberechtigungen mit Kontrollkästchen. Sofortige Umwandlung zwischen numerischer (755, 644) und symbolischer Notation (rwxr-xr-x). Unterstützt Sonderberechtigungen wie setuid, setgid, sticky bit.
- ASCII-Tabelle Vollständige ASCII-Zeichencodierungsreferenz mit Dezimal-, Hexadezimal-, Oktal-, Binärcodes, HTML-Entities und Beschreibungen. Sofortige Suche und Filterung.
- HTTP-Anfrage-Tester Testen Sie REST-APIs direkt im Browser. Senden Sie GET-, POST-, PUT-, DELETE-Anfragen mit benutzerdefinierten Headern, Body und Parametern. Sehen Sie sofort Status, Header und JSON-Body.
- .htaccess-Generator Generieren Sie Apache .htaccess-Regeln für Weiterleitungen, Umschreibungen, Sicherheitsheader, Caching und mehr.