CSS-Beautifier & Minifier

Was es tut

Machen Sie aus einem minimierten Stylesheet oder einer unordentlichen SCSS-Datei lesbaren Code mit einer Deklaration pro Zeile, oder verkleinern Sie ein Stylesheet für die Produktion. Die Ausgabe wird während der Eingabe aktualisiert.

Funktionen

• CSS, SCSS und LESS: Verschachtelung, Variablen, Mixins, Maps, @use, Guards sowie #{}- und @{}-Interpolation werden verstanden.
• Prettier-Formatierung mit 2 Leerzeichen, 4 Leerzeichen oder Tabulatoren, Zeilenbreite und einfachen oder doppelten Anführungszeichen.
• Minimieren entfernt Kommentare außer /*! ... */-Lizenzkommentaren sowie Leerraum überall dort, wo er keine Rolle spielt: um { } ; ,, nach : und (, vor !important und um die Kombinatoren > + ~ in Selektoren. Auch das letzte Semikolon jedes Blocks entfällt. Alles andere wird unverändert übernommen, sodass Strings, url()-Werte, Escapes wie .md\:flex, calc(1px + 2px) und Nachfahren-Selektoren wie .a :hover ihre Bedeutung behalten. In SCSS und LESS werden zusätzlich //-Zeilenkommentare entfernt.
• Präzise Fehler: Ein nicht geschlossener Block, ein fehlendes Anführungszeichen oder eine überzählige } werden mit Zeile und Spalte, einem markierten Ausschnitt und der Schaltfläche Zum Fehler gemeldet.
• Größe vorher und nachher, Zeilenzahlen und Dauer. Beim Öffnen einer .scss- oder .less-Datei wird die Sprache automatisch umgestellt.

So verwenden Sie es

1. Fügen Sie ein Stylesheet ein, öffnen Sie eine Datei oder ziehen Sie sie auf die Eingabe. Beispiel lädt ein Beispiel.
2. Wählen Sie die Sprache und dann Formatieren oder Minimieren.
3. Kopieren Sie das Ergebnis oder laden Sie es herunter. Ctrl+Enter führt sofort aus.

Der Minifier fasst keine Regeln zusammen, kürzt keine Farben und schreibt keine Werte um; für diese Art der Optimierung verwenden Sie ein Build-Werkzeug wie cssnano oder Lightning CSS. Minimiertes SCSS und LESS bleibt SCSS und LESS – kompilieren Sie es vor der Auslieferung.

Datenschutz

Alles läuft in Ihrem Browser; nur die fest versionierten Prettier-Dateien werden von einem CDN geladen. Ihre Styles werden nie hochgeladen. Die letzte Eingabe bleibt im lokalen Speicher, damit ein Neuladen sie nicht löscht.