CSS-Werkzeuge

Die komplette CSS-Werkzeugkiste: formatieren/verschönern, minifizieren/verdichten, Syntax validieren, SCSS/Sass & LESS nach CSS kompilieren und CSS zurück in SCSS oder LESS umwandeln.
Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser — Ihre Daten werden nie auf einen Server hochgeladen.
Modus:
Eingabe CSS / SCSS / LESS / SASS
Ausgabe
So verwenden Sie es: Fügen Sie Ihr CSS/SCSS/LESS/SASS in das linke Textfeld ein, wählen Sie einen Modus und klicken Sie auf Verarbeiten (oder tippen Sie einfach — die Verarbeitung läuft bei jeder Eingabe automatisch).
So funktioniert jeder Modus
CSS formatieren: Formatiert CSS mit einheitlicher Einrückung (2/4 Leerzeichen oder Tabs), eine Eigenschaft pro Zeile. Verarbeitet verschachtelte At-Regeln wie @media, @keyframes, @supports. Kommentare bleiben erhalten (sowohl /* */ als auch einzeilige). Wechseln Sie mit dem Auswahlfeld Einrückung zwischen 2 Leerzeichen, 4 Leerzeichen oder Tabs.
Minifizieren: Entfernt alle unnötigen Leerzeichen, Kommentare und überflüssigen Zeichen, um das kompakteste CSS zu erzeugen. Ideal für den Produktivbetrieb, um Dateigröße und Bandbreite zu reduzieren. Die Statusleiste zeigt das Kompressionsverhältnis.
Validieren: Analysiert das CSS und prüft auf Syntaxfehler. Meldet Parserfehler mit genauen Zeilen- und Spaltennummern. Zeigt außerdem Statistiken: Anzahl der Regeln, Selektoren, Deklarationen und At-Regeln.
SCSS formatieren: Formatiert SCSS-/Sass-Stylesheets mit einheitlicher Einrückung neu. Verarbeitet die gesamte SCSS-spezifische Syntax: $variablen, @mixin/@include, @extend, den Kontrollfluss @if/@for/@each, #{$var}-Interpolation und einzeilige //-Kommentare. Erhält die verschachtelte Selektorstruktur und rückt verschachtelte Blöcke korrekt ein. Wechseln Sie mit dem Auswahlfeld Einrückung zwischen 2 Leerzeichen, 4 Leerzeichen oder Tabs.
LESS formatieren: Formatiert LESS-Stylesheets mit einheitlicher Einrückung neu. Verarbeitet die gesamte LESS-spezifische Syntax: @variablen, parametrische Mixins, Guards (when), @{var}-Interpolation, Merging und einzeilige //-Kommentare. Erhält die verschachtelte Selektorstruktur und rückt verschachtelte Blöcke korrekt ein. Wechseln Sie mit dem Auswahlfeld Einrückung zwischen 2 Leerzeichen, 4 Leerzeichen oder Tabs.
SCSS → CSS: Kompiliert SCSS-/Sass-Stylesheets mit dem offiziellen Compiler Dart Sass (v1.102) zu reinem CSS. Unterstützt Variablen ($var), Verschachtelung, Mixins (@mixin, @include), Funktionen, @extend, den Kontrollfluss @if/@for/@each sowie moderne Sass-Module (@use, @forward). Der Sass-Compiler (~5,4 MB) wird beim ersten Gebrauch dieses Modus nachgeladen.
LESS → CSS: Kompiliert LESS-Stylesheets zu reinem CSS. Unterstützt Variablen (@var), Verschachtelung, Mixins, parametrische Mixins, Operationen, Funktionen, Guards und Importe (@import). Der Compiler (~150 KB) wird beim ersten Gebrauch dieses Modus nachgeladen.
SASS → CSS: Kompiliert die eingerückte SASS-Syntax (.sass-Dateien, ohne geschweifte Klammern und Semikola) mit Dart Sass zu reinem CSS. Eingerücktes SASS nutzt Leerraum statt geschweifter Klammern, was es knapper macht. Derselbe Dart-Sass-Compiler (~5,4 MB) verarbeitet sowohl die SCSS- als auch die eingerückte SASS-Syntax.
CSS → SCSS: Wandelt Standard-CSS in SCSS-Syntax um, mit automatischer Umstrukturierung der Verschachtelung. Erkennt BEM-ähnliche Muster und verschiebt .parent-child-Selektoren in verschachtelte Blöcke mit &-child. Wandelt Nachfahrenselektoren in verschachtelte Regeln, Pseudoklassen-Selektoren in &:state um und extrahiert wiederholte CSS-Custom-Properties in SCSS-$variablen. Hat Ihr CSS eine flache, repetitive Struktur, hilft Ihnen dieses Werkzeug, sie in saubereres, verschachteltes SCSS umzubauen.
CSS → LESS: Wandelt Standard-CSS in LESS-Syntax um, mit automatischer Umstrukturierung der Verschachtelung. Dieselbe Art der Verschachtelung wie bei CSS→SCSS: erkennt wiederholte Elternmuster, Nachfahrenselektoren und Pseudoklassen. Extrahiert wiederholte CSS-Custom-Properties in LESS-@variablen. Die Ausgabe ist sauberer, verschachtelter LESS-Code.
Kaskade, Spezifität und warum sich Stile in die Quere kommen

Wenn mehrere Regeln dasselbe Element treffen, entscheidet die Spezifität über den Gewinner: Inline-Stile schlagen IDs, IDs schlagen Klassen, Klassen schlagen Element-Selektoren, und die Reihenfolge im Quelltext entscheidet bei Gleichstand. Das Flag !important überstimmt diese Rechnung — und macht die nächste Überstimmung umso schwerer.

Die Spezifität wird pro Selektor bewertet, nicht aus dem Kontext summiert — eine spezifischere Regel gewinnt, egal wo sie im Stylesheet steht.