SCSS-Formatierer
SCSS-Code direkt im Browser sauber und lesbar formatieren und einrücken.
Dieses Tool läuft vollständig in deinem Browser. Deine Dateien werden niemals auf einen Server hochgeladen.
$color:#3366ff;
.button {
color:$color;
&:hover {
opacity:.8;
}
}Was dieser Formatierer macht
Ordnet SCSS-ähnlichen Text mit Zeilenumbrüchen nach öffnenden und schließenden Klammern sowie Semikolons und rückt jede verschachtelte Klammerstufe mit zwei Leerzeichen ein — einschließlich SCSS-Verschachtelung, &:hover-artiger Eltern-Selektoren und @mixin/@include-Blöcke, die für diesen Formatierer einfach klammerbegrenzte Blöcke sind.
Anwendung
Füge SCSS in den Editor ein; das formatierte Ergebnis wird sofort aktualisiert. Kopiere es anschließend oder leere den Editor mit Reset. Reset stellt das ursprüngliche Beispiel nicht wieder her.
Formatierungsverhalten
Außerhalb von Zeichenketten und Kommentaren werden Leerraumfolgen reduziert und Deklarationen nach Semikolons getrennt — genauso bei einer gewöhnlichen CSS-Regel, einem verschachtelten Selektor oder dem Körper eines Mixins. Inhalte in Anführungszeichen, Escape-Zeichen, Blockkommentare und erkannte //-Zeilenkommentare bleiben erhalten; Interpolation wie #{$variable} bleibt unverändert, da es sich innerhalb einer Deklaration nur um gewöhnliche Zeichen handelt.
Wichtige Parser-Grenze
Das Tool arbeitet zeichenbasiert und ist kein SCSS-Compiler, -Parser oder -Linter — es kompiliert Sass nicht zu CSS, löst keine Variablen oder @mixin/@include/@extend-Direktiven auf, prüft keine Verschachtelungstiefe und meldet keine Sass-spezifischen Syntaxfehler. Es vereinheitlicht auch keine Abstände um Doppelpunkte, sortiert keine Eigenschaften und erweitert keine Kurzformen.
Sicher prüfen
Da der Formatierer nur auf Klammern, Anführungszeichen und Semikolons reagiert, können ungewöhnliche Konstrukte — tief verschachtelte &-Selektoren, Kontrolldirektiven wie @if/@each oder Interpolation ohne Anführungszeichen — zu überraschender Einrückung führen. Prüfe die Ausgabe und kompiliere sie mit deiner üblichen Sass-Toolchain, bevor du dich im Produktionseinsatz darauf verlässt.
Datenschutz
Die Verarbeitung läuft lokal im Browser; eingefügtes SCSS wird von diesem Tool nicht hochgeladen.
Häufig gestellte Fragen
- Was macht der SCSS-Formatierer?
- SCSS-Code direkt im Browser sauber und lesbar formatieren und einrücken.
- Verändert dieses SCSS-Tool das Programmverhalten?
- Es ändert nur Layout oder entfernbare Leerzeichen. Bei ungewöhnlicher Syntax die Ausgabe vor dem Produktionseinsatz prüfen.
- Wird mein Code hochgeladen?
- Die Verarbeitung erfolgt lokal; dein Code wird nicht hochgeladen.