CSS-Variablen-Parser
Analysieren Sie CSS-Variablen, zählen Sie var()-Referenzen und finden Sie ungenutzte CSS-Custom-Properties in Ihrem Code.
Tool ausführen
Mit diesem Analysewerkzeug untersuchen Sie Stylesheets gezielt auf CSS-Variablen und deren tatsächliche Verwendung im Code. Sie fügen Ihren CSS-Quelltext in das Eingabefeld ein und starten die Auswertung. Das Tool erfasst alle definierten benutzerdefinierten Eigenschaften, deren Bezeichner mit zwei Bindestrichen beginnen, und liest die zugewiesenen Eigenschaftswerte aus. Gleichzeitig durchsucht es den Text nach Aufrufen über die Funktion var() und zählt jede gefundene Referenz namentlich.
Nach dem Durchlauf zeigt Ihnen die Übersicht alle deklarierten Variablen zusammen mit den jeweiligen Werten und Häufigkeiten. Zusätzlich listet das Werkzeug ungenutzte Deklarationen auf, zu denen keine passende var()-Verwendung im Stylesheet gefunden wurde. Dies hilft Ihnen dabei, verwaiste Variablen in Design-Tokens, Farbschemata oder Layout-Definitionen rasch aufzuspüren und Ihre CSS-Dateien sauber zu strukturieren. Die Erkennung orientiert sich an standardkonformen Deklarationsmustern mit Doppelpunkt und Semikolon. Voraussetzung für die Analyse ist ein ausgefüllter CSS-Text im Eingabebereich.
Anleitung
- Fügen Sie Ihren CSS-Code in das Textfeld ein.
- Klicken Sie auf die Schaltfläche zum Starten der Analyse.
- Prüfen Sie die Liste der erfassten benutzerdefinierten Eigenschaften und deren Werte.
- Überprüfen Sie die Gesamtzahlen sowie die ungenutzten Deklarationen ohne var()-Referenz.
Beispiele
- :root { --main-bg: #fafafa; --main-color: #222; } body { background-color: var(--main-bg); color: var(--main-color); }
- :root { --accent: #0070f3; --unused-padding: 16px; } button { background: var(--accent); }
FAQ
Welche CSS-Variablen erkennt das Werkzeug?
Erkannt werden alle benutzerdefinierten Eigenschaften, deren Name mit zwei Bindestrichen beginnt und die eine Zuweisung mit Doppelpunkt und Semikolon aufweisen.
Wie werden Referenzen im Code ermittelt?
Das Tool durchsucht den Text nach Mustern im Format var(--name) und zählt die Häufigkeit für jeden Variablennamen separat.
Was passiert, wenn das Eingabefeld leer bleibt?
Wird kein Text eingegeben, bricht die Verarbeitung ab und fordert zur Eingabe von CSS-Quelltext auf.
Werden Fallback-Werte in var()-Funktionen ausgewertet?
Nein, das Werkzeug erfasst die var()-Aufrufe rein namentlich und wertet keine Fallback-Parameter semantisch aus.