So funktioniert es
Rückt komprimierte oder schlecht ausgerichtete CSS- oder SCSS-Stylesheets neu ein und ordnet sie, um sie lesbar zu machen. Nützlich, um minifizierte Stile zu inspizieren, fremdes CSS zu prüfen oder das Format vor dem Speichern zu vereinheitlichen.
Du kannst die Einrückungsart (Leerzeichen oder Tabs), die Einrückungsgröße und das Zeilenende wählen. Jede Deklaration kommt in eine eigene Zeile, und durch Kommas getrennte Selektoren werden auf getrennte Zeilen gesetzt.
Die Verarbeitung erfolgt vollständig lokal in deinem Browser mit js-beautify. Es formatiert die Darstellung; es minifiziert nicht, ordnet keine Eigenschaften um und validiert nicht, ob die Regeln korrekt sind.
Beispiele
a,b{color:red;margin:0}a,
b {
color: red;
margin: 0
}Selektoren werden auf Zeilen aufgeteilt und jede Eigenschaft wird eingerückt.Anwendungsfälle
- Eine minifizierte .css-Datei einer Website lesbar machen.
- Die Einrückung eines Stylesheets vor einem Commit vereinheitlichen.
- CSS-Regeln eines Frameworks oder einer Bibliothek prüfen und vergleichen.
- SCSS ordnen, das aus Dokumentation oder Generatoren eingefügt wurde.
Häufige Fragen
Funktioniert es auch für SCSS oder LESS?
Es formatiert CSS und kompatible Syntax wie SCSS, einschließlich verschachtelter Regeln. Es kompiliert SCSS oder LESS nicht zu CSS: Es ordnet nur die Einrückung und Zeilenumbrüche neu an.
Ordnet es die Eigenschaften um oder gruppiert sie?
Nein. Es behält die ursprüngliche Reihenfolge von Selektoren und Deklarationen bei. Es ändert nur Abstände, Einrückung und Zeilenumbrüche, um die Lesbarkeit zu verbessern.
Ist das dasselbe wie CSS zu minifizieren?
Nein, es ist das Gegenteil. Formatieren fügt Leerzeichen und Umbrüche hinzu, um es besser zu lesen; Minifizieren entfernt sie, um die Dateigröße zu reduzieren. Zum Komprimieren das Minifizierungs-Tool verwenden.
Wird mein Code auf einen Server hochgeladen?
Nein. Die Formatierung erfolgt vollständig in deinem Browser; der CSS verlässt deinen Computer nie.