Keine Werbung mögen? Gehen Werbefrei Heute 

CSS Custom Property Extractor

EntwicklerText

ANZEIGE Entfernen?

EINGANG

Automatischer Prozess

AUSGABE

Client-Seite

ANZEIGE Entfernen?

Führung

CSS Custom Property Extractor

Paste any CSS or SCSS stylesheet and instantly get a clean, sorted, deduplicated list of every --custom-property declared in it — along with the selector scope it was declared in. The extractor also surfaces variables that are referenced via var(--name) but never declared anywhere, which are a common cause of broken styles in large design systems.

Nutzung

Paste your stylesheet into the CSS / SCSS Input box (or click Probieren Sie ein Beispiel aus to load a sample).
Wählen Sie ein Ausgabeformat: a plain-text table, a JSON object, or a ready-to-paste :root { } block.
Verwenden Sie die Filter field to narrow the result by variable name, value, or scope.
Umschalten Include selector scope to control whether the table shows where each variable was declared.
Review the Undefined Variables panel for any var(--name) references that have no matching declaration.
Copy or download the extracted list with the buttons on the output panel.

Funktionen

Brace-aware parser – walks the stylesheet character by character so it correctly handles nested selectors, media queries, and quoted values.
Scope tracking – each variable is paired with the selector or at-rule it was declared in, so you can tell a :root token apart from a component-scoped override.
Drei Ausgabeformate – plain-text table for review, JSON for programmatic use, and a clean :root { } block you can paste back into a stylesheet.
Undefined variable detection – flags any var(--name) that has no matching declaration anywhere in the input.
Live filter – type to narrow the result by variable name, value, or selector scope in real time.
Dedupe and sort – duplicate declarations within the same scope are collapsed and the list is alphabetised for quick scanning.
Laufend im Browser – nothing is uploaded; works on private and unfinished stylesheets.

Wann Sie dieses Tool verwenden sollten

Auditing a design-system stylesheet to build a master list of tokens.
Migrating SCSS variables to native CSS custom properties.
Tracking down a broken style caused by a misspelled var() reference.
Generating a starter :root { } block from a third-party theme.
Exporting tokens as JSON for use in a documentation site or Storybook entry.

 Häufig gestellte Fragen

What is a CSS custom property?

A CSS custom property (also called a CSS variable) is an author-defined identifier prefixed with two dashes (for example, --color-primary) whose value can be reused anywhere in the stylesheet through the var() function. Unlike preprocessor variables, custom properties are resolved at runtime by the browser, which means they cascade and inherit just like any other CSS property and can be updated dynamically with JavaScript.
How does selector scope affect a custom property?

A custom property exists only within the subtree of the element that declares it. Declaring it on :root makes it effectively global because :root matches the html element, while declaring it inside a component selector like .card limits its value to that component and its descendants. The same name can hold different values in different scopes, which is the mechanism behind theming, dark mode toggles, and component-level overrides.
Why does CSS not error when var() points to an undefined custom property?

The CSS Custom Properties specification requires the browser to fall back silently when a referenced variable has not been declared. If var() has no fallback argument, the entire property is treated as if it has the value unset, which often leaves an element with its initial or inherited style. Because no error is reported in the console, undeclared references are easy to miss, and surfacing them up front prevents subtle visual regressions.
Are SCSS variables and CSS custom properties the same thing?

They share a similar role but live at different stages of the pipeline. SCSS variables, written with a dollar sign such as $color-primary, are resolved when SCSS is compiled to CSS and disappear from the final output. CSS custom properties prefixed with two dashes survive compilation and are evaluated by the browser at render time, which is what enables runtime theming and JavaScript-driven updates.
Can a custom property be redeclared and what happens then?

Yes. When the same custom property is declared more than once for the same element, the normal CSS cascade decides which declaration wins, taking specificity, source order, and importance into account. Inside a single rule the last declaration overrides the earlier ones, which is the same conflict-resolution behaviour that applies to any other CSS property.

Möchten Sie werbefrei genießen? Werde noch heute werbefrei



 Erweiterungen installieren

IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche

恵 Die Anzeigetafel ist eingetroffen!

Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!

ANZEIGE Entfernen?