SCSS-Formatter

Er liest das Stylesheet als Token wie Klammern, Semikolons, Doppelpunkte, Zeichenfolgen und Kommentare und erstellt daraus eine neue Formatierung. Jede öffnende Klammer beginnt einen eingerückten Block, und jede Deklaration steht in einer eigenen Zeile.

Ja, verschachtelte Regeln und übergeordnete Selektoren wie &:hover werden eine Ebene tiefer als ihr übergeordneter Selektor eingerückt, mit zwei Leerzeichen pro Ebene. Die Doppelpunkte in Selektoren bleiben an ihrer Position, sodass &:hover nicht getrennt wird.

Variablen wie $color: #333; erhalten ein Leerzeichen nach dem Doppelpunkt. @mixin und @include behalten ihre Argumente, mit einem Leerzeichen nach jedem Komma. Vor der öffnenden Klammer von Steueranweisungen wie @if, @each und @for steht ein Leerzeichen.

Ja, Interpolationen wie #{$name} werden genau wie geschrieben übernommen. Das gilt auch für Interpolationen in Selektoren wie .icon-#{$name} und in Eigenschaftsnamen.

Nein, es kompiliert nicht zu CSS und prüft auch nicht die Syntax. Daher formatiert es auch unvollständige Codeausschnitte. Verwende den Sass-Compiler, um Fehler zu finden und CSS zu erzeugen.

Ja. Zeilenkommentare, die mit // beginnen, beenden die jeweilige Zeile. Blockkommentare bleiben an ihrer Position erhalten.

Nein, der Formatter ist für SCSS gedacht, das geschweifte Klammern und Semikolons verwendet. Dateien mit der eingerückten .sass-Syntax haben keine Klammern, an denen sich die Einrückung orientieren kann. Wandle sie daher zuerst in SCSS um.

Nein, die Ausgabe verwendet immer zwei Leerzeichen, und der Formatter bietet keine Optionen. Daher liefert dasselbe Stylesheet immer dasselbe Ergebnis.

Die Ausgabe wird als Markdown-Codeblock mit der Kennzeichnung scss zurückgegeben und deshalb mit Syntaxhervorhebung dargestellt. Kopiere die Zeilen zwischen den Begrenzungen in deine .scss-Datei.

Bis zu 5 MB pro Durchlauf; größere Eingaben werden mit einer Meldung abgelehnt. Die Ausgabe entspricht der Option SCSS des Code-Formatters.