SCSS zu CSS
SCSS und Sass online in CSS kompilieren – mit dem offiziellen Dart-Sass-Compiler im Browser, Fehlern mit Zeilenangabe und Minify-Option.
SCSS zu CSS kompiliert SCSS- und Sass-Code direkt im Browser mit dem offiziellen Dart-Sass-Compiler. Variablen, Mixins, Maps, Schleifen, Funktionen und Verschachtelung werden zu normalem CSS. Fehler erscheinen mit Zeile und Spalte. Die Ausgabe ist wahlweise lesbar oder minifiziert; dein Code verlässt dabei nicht das Gerät.
CSS
Was Sass zu CSS hinzufügt
| Funktion | SCSS | Ergebnis im CSS |
|---|---|---|
| Variablen | $primary: #2563eb; | Wert wird eingesetzt |
| Verschachtelung | .a { &:hover { … } } | .a:hover |
| Mixins | @include focus-ring; | Deklarationen werden kopiert |
| Schleifen | @each, @for | Mehrere Regeln |
| Funktionen | math.div(), color.adjust() | Berechneter Wert |
Den umgekehrten Weg, also normales CSS in verschachteltes SCSS, geht der CSS-zu-SCSS-Konverter. Das kompilierte CSS kannst du mit CSS minifizieren weiter verkleinern.
Häufige Fragen
Was ist der Unterschied zwischen SCSS und Sass?
Beides ist dieselbe Sprache mit zwei Schreibweisen. SCSS sieht aus wie CSS mit geschweiften Klammern und Semikolons, jede gültige CSS-Datei ist auch gültiges SCSS. Die ältere Sass-Syntax arbeitet mit Einrückung statt Klammern.
Welcher Sass-Compiler wird verwendet?
Dart Sass, die offizielle und einzige noch gepflegte Implementierung. Node Sass und LibSass sind eingestellt. Das Ergebnis entspricht daher dem, was dein Build-Tool erzeugt.
Funktioniert @use oder @import mit anderen Dateien?
Nein, im Browser gibt es nur die eine Eingabe. Eingebaute Module wie @use "sass:math" oder "sass:color" funktionieren, eigene Partials musst du in die Eingabe kopieren.
Warum erscheinen Farben als rgb() mit Prozentwerten?
Seit Dart Sass 1.79 rechnen Farbfunktionen wie darken() oder color.adjust() mit voller Genauigkeit. Liegen die Kanäle nicht auf ganzen Zahlen, gibt Sass rgb(7.6%, 31.2%, 83%) statt eines gerundeten HEX-Werts aus. Die Farbe ist dieselbe; darken() und lighten() gelten zudem als veraltet.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.