SCSS formatieren

Was dieser SCSS Formatter macht

Mit SCSS kannst du Regeln verschachteln, Werte in $variables speichern, Blöcke mit @mixin wiederverwenden und Einstellungen in Maps ablegen. Diese Möglichkeiten lassen Dateien schnell wachsen, und sobald mehrere Leute dasselbe Stylesheet bearbeiten, gerät die Einrückung durcheinander. Eine Person schreibt color:$brand, eine andere color : $brand ;, und verschachtelte Blöcke landen in zufälligen Tiefen.

Dieses Tool formatiert SCSS so, dass jede Verschachtelungsebene gleich eingerückt ist, jede Deklaration in einer eigenen Zeile steht und die Abstände um Doppelpunkte und Klammern einheitlich sind. Es nutzt Prettier 3 mit seinem SCSS-Parser, vollständig in deinem Browser.

So nutzt du es

1. Füge dein SCSS in das linke Feld ein. Es wird in dem Moment formatiert, in dem du es einfügst.
2. Du kannst auch auf Datei öffnen klicken, um eine .scss-Datei zu laden, oder auf Beispiel, um ein Beispiel zu sehen.
3. Wähl die Einrückung: 2 Leerzeichen, 4 Leerzeichen oder Tabs.
4. Wähl die Zeilenbreite. Lange Selektorlisten, Maps und Include-Argumente werden über diese Breite hinaus umbrochen.
5. Schalte Einfache Anführungszeichen ein, wenn dein Styleguide sie bevorzugt.
6. Klicke auf Formatieren oder drück Strg+Enter in der Eingabe.
7. Klicke auf Kopieren oder auf Herunterladen, um eine .scss-Datei zu speichern.

Nach dem ersten Formatieren folgt die Ausgabe beim Tippen deinen Änderungen. Wenn etwas nicht stimmt, erscheint unter den Feldern eine Meldung wie Zeile 2, Spalte 3: Unclosed block (der Meldungstext kommt vom Parser und bleibt Englisch), und In der Eingabe zeigen setzt den Cursor an diese Stelle.

Vorher und nachher

Ein komprimierter SCSS-Ausschnitt mit einer Variable, einem Mixin und verschachtelten Regeln:

$brand:#3b82f6;@mixin card($pad:16px){padding:$pad;border-radius:8px}.nav{display:flex;gap:1rem;a{color:$brand;&:hover{text-decoration:underline}}.btn{@include card(12px)}}

Nach Formatieren mit 2 Leerzeichen:

$brand: #3b82f6;
@mixin card($pad: 16px) {
  padding: $pad;
  border-radius: 8px;
}
.nav {
  display: flex;
  gap: 1rem;
  a {
    color: $brand;
    &:hover {
      text-decoration: underline;
    }
  }
  .btn {
    @include card(12px);
  }
}

Jede Verschachtelungsebene fügt eine Einrückung hinzu. So siehst du auf einen Blick, dass &:hover zum Link innerhalb von .nav gehört.

Sass-Maps werden über mehrere Zeilen verteilt, ein Schlüssel pro Zeile:

$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px
);

Mit Einfache Anführungszeichen an wird aus @use "sass:math"; ein @use 'sass:math';. Zeilenkommentare bleiben genau dort, wo sie waren:

// Header styles
.header {
  .logo {
    width: 120px;
  }
}

Fehler und Grenzen

Der Formatter muss deine Datei parsen, bevor er sie ausgeben kann. Eine fehlende schließende Klammer ist das häufigste Problem. Bei dieser Eingabe:

.nav {
  a { color: red;

lautet die Meldung Zeile 2, Spalte 3: Unclosed block. Sie zeigt auf das a {, das nie geschlossen wurde.

Ein paar Dinge solltest du wissen:

• Das Tool prüft die Syntax, nicht die Bedeutung. Eine nicht definierte Variable oder ein nicht existierendes Mixin wird nicht gemeldet. Die findet der Sass-Compiler.
• Es sortiert weder Eigenschaften noch Selektoren um. Deine Reihenfolge bleibt erhalten.
• Die eingerückte .sass-Syntax wird nicht unterstützt. Wandle sie zuerst in SCSS um oder formatiere sie in einem Editor, der sie unterstützt.
• Auf dieser Seite gibt es kein Minifizieren. SCSS zu minifizieren ergibt keinen Sinn, weil Browser nur CSS ausführen. Kompiliere mit Sass und minifiziere dann das CSS-Ergebnis.

Tipps für saubereres SCSS

• Halt die Verschachtelung flach. Drei Ebenen sind in Styleguides eine übliche Grenze, weil tiefe Verschachtelung lange, fragile Selektoren erzeugt.
• Leg Variablen und Maps in ein eigenes Partial wie _tokens.scss und lade es mit @use.
• Formatiere vor dem Commit. Sonst landen kleine Änderungen an Abständen im Code-Review zwischen den echten Änderungen.
• Wenn du am reinen CSS-Ergebnis arbeitest, kann der CSS Formatter es auch minifizieren.

Andere Wege, SCSS zu formatieren

• VS Code: Installiere die Prettier-Erweiterung, öffne die Datei und führe Dokument formatieren aus (Umschalt+Alt+F unter Windows, Umschalt+Option+F unter macOS).
• Kommandozeile: npx prettier --write "src/**/*.scss" formatiert jede SCSS-Datei in einem Ordner.
• JetBrains-IDEs wie WebStorm haben eine eingebaute Aktion zum Neuformatieren von Code und können Prettier nutzen, wenn es im Projekt installiert ist.

Diese Seite braucht keine Einrichtung und behält deinen Code auf deinem Gerät. Damit ist sie eine schnelle Option für einen Ausschnitt aus einem Ticket, einem CodePen oder der Nachricht einer Kollegin. Für das Markup, das diese Styles nutzt, probier den HTML Formatter, und für Skripte den JavaScript Formatter.