Was ist der ArrayKit CSS-Formatter?

Es ist ein browserbasierter CSS-Formatter, der CSS, SCSS und LESS mit Prettier verschönert oder minifiziert und Eigenschaften alphabetisch sortieren sowie doppelte Deklarationen in reinem CSS entfernen kann.

Wie minifiziere ich CSS mit dem CSS-Formatter?

Füge dein Stylesheet ein, wähle den passenden Syntaxmodus und wähle dann Minifizieren, um Kommentare und Leerraum zu entfernen und kompaktes Produktions-CSS zu erzeugen, das du kopieren oder herunterladen kannst.

Unterstützt der CSS-Formatter SCSS und LESS?

Ja. Wähle die Syntax (CSS, SCSS oder LESS), und er parst entsprechend. Eigenschaftssortierung und Entdoppelung gelten für reines CSS.

Kann der CSS-Formatter Eigenschaften alphabetisch sortieren?

Ja. Im Verschönern-Modus mit ausgewähltem CSS schalte Eig. sortieren um, um Deklarationen innerhalb jeder Regel alphabetisch neu zu ordnen.

Welche Engine formatiert das CSS?

Das Verschönern nutzt Prettier, sodass die Ausgabe denselben Konventionen entspricht, die Prettier in deinem Editor und deinen Build-Tools anwendet.

Wird mein CSS vom CSS-Formatter irgendwohin hochgeladen?

Nein. Der CSS-Formatter läuft vollständig in deinem Browser, sodass deine Stylesheets lokal verarbeitet werden und dein Gerät nie verlassen.

CSS-/SCSS-Formatierer

Verschönere oder minimiere CSS/SCSS/LESS, sortiere Eigenschaften und entferne Duplikate.

Dein CSS wird lokal in deinem Browser formatiert und nichts wird auf einen Server hochgeladen.

Musst du auch JavaScript verschönern? Probiere den JS Formatter.

Über CSS-/SCSS-Formatierer

Dieser CSS-Formatter verschönert oder minifiziert CSS, SCSS und LESS mit Prettier, mit Optionen, um Deklarationen alphabetisch zu sortieren und doppelte Eigenschaften zu entfernen. Nutze ihn als CSS-Beautifier, um unordentliche Stylesheets aufzuräumen, oder als SCSS-Formatter und LESS-Formatter, wenn du mit Präprozessoren arbeitest. Wechsle in den Minify-Modus, um Kommentare und Leerraum zu entfernen und kompaktes Produktions-CSS zu erzeugen. Er ist für Frontend-Entwickler, Designer und QA-Ingenieure gebaut, die konsistente, lesbare Styles oder eine schnelle Möglichkeit brauchen, CSS online vor einem Commit oder Code-Review zu formatieren. Du kannst Tabs oder Leerzeichen für die Einrückung wählen, die zu deiner Datei passende Syntax auswählen und die Prettier-CSS-Ausgabe überall wiederverwenden. Alles wird lokal in deinem Browser verarbeitet, sodass deine Stylesheets dein Gerät nie verlassen und nichts auf einen Server hochgeladen wird.

Funktionen

Verschönere oder minifiziere CSS, SCSS und LESS mit Prettier
Wähle den Syntaxmodus (CSS, SCSS oder LESS) für genaues Parsen
Sortiere Eigenschaften alphabetisch innerhalb jeder Regel (reines CSS)
Entferne doppelte Deklarationen aus reinem CSS
Wähle Tabs oder Leerzeichen für die Einrückung
Der Minify-Modus entfernt Kommentare und Leerraum für die Produktion
Formatiere verschachtelte Regeln und Media Queries konsistent neu
Läuft vollständig in deinem Browser

So verwendest du CSS-/SCSS-Formatierer

Füge dein CSS, SCSS oder LESS in das Eingabefeld ein.
Wähle den Syntaxmodus (CSS, SCSS oder LESS), der zu deiner Datei passt.
Wähle Verschönern zum Formatieren oder Minifizieren zum Komprimieren der Ausgabe.
Schalte Eig. sortieren, Entdoppeln oder Tabs um, um das Ergebnis abzustimmen.
Kopiere oder lade das formatierte CSS aus dem Ausgabebereich herunter.

Beispiel

Eingabe

.btn{color:#FFF;padding:8px;color:#fff;}

Ausgabe

.btn {
  color: #fff;
  padding: 8px;
}

Verschönern-Modus mit entfernten doppelten Deklarationen.

Häufige Fehler & Fehlerbehebung

Eigenschaftssortierung oder Entdoppelung hat keine Wirkung auf SCSS oder LESS. — Sortieren und Entfernen von Duplikaten gelten für reines CSS; wechsle den Syntaxmodus auf CSS, wenn du diese Optionen ausführen willst.
Die Schalter Eig. sortieren und Entdoppeln fehlen in der Symbolleiste. — Diese Schalter erscheinen nur im Verschönern-Modus mit ausgewählter CSS-Syntax; schalte Minifizieren aus und wähle CSS, um sie anzuzeigen.
Minifiziertes CSS ist danach schwer zu bearbeiten. — Behalte deine Originalquelldatei; die Minify-Ausgabe ist für die Produktion gedacht, nicht für weitere Bearbeitung.
Die Ausgabe lässt sich nicht formatieren, weil die falsche Syntax gewählt ist. — Passe den Syntaxmodus an deinen Code an, wähle zum Beispiel SCSS für Verschachtelung und Variablen, damit Prettier ihn korrekt parst.
Die Einrückung passt nicht zu deinem Projektstil. — Schalte die Tabs-Option um, um vor dem Kopieren zwischen Tabs und Leerzeichen zu wechseln.

Häufig gestellte Fragen

Was ist der ArrayKit CSS-Formatter?: Es ist ein browserbasierter CSS-Formatter, der CSS, SCSS und LESS mit Prettier verschönert oder minifiziert und Eigenschaften alphabetisch sortieren sowie doppelte Deklarationen in reinem CSS entfernen kann.
Wie minifiziere ich CSS mit dem CSS-Formatter?: Füge dein Stylesheet ein, wähle den passenden Syntaxmodus und wähle dann Minifizieren, um Kommentare und Leerraum zu entfernen und kompaktes Produktions-CSS zu erzeugen, das du kopieren oder herunterladen kannst.
Unterstützt der CSS-Formatter SCSS und LESS?: Ja. Wähle die Syntax (CSS, SCSS oder LESS), und er parst entsprechend. Eigenschaftssortierung und Entdoppelung gelten für reines CSS.
Kann der CSS-Formatter Eigenschaften alphabetisch sortieren?: Ja. Im Verschönern-Modus mit ausgewähltem CSS schalte Eig. sortieren um, um Deklarationen innerhalb jeder Regel alphabetisch neu zu ordnen.
Welche Engine formatiert das CSS?: Das Verschönern nutzt Prettier, sodass die Ausgabe denselben Konventionen entspricht, die Prettier in deinem Editor und deinen Build-Tools anwendet.
Wird mein CSS vom CSS-Formatter irgendwohin hochgeladen?: Nein. Der CSS-Formatter läuft vollständig in deinem Browser, sodass deine Stylesheets lokal verarbeitet werden und dein Gerät nie verlassen.