CSS Custom Property Extractor
指导
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.
如何使用
- Paste your stylesheet into the CSS / SCSS Input box (or click 尝试一个示例 to load a sample).
- 选择一个 输出格式: a plain-text table, a JSON object, or a ready-to-paste
:root { }block. - 使用 筛选 field to narrow the result by variable name, value, or scope.
- 切换 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.
特征
- 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
:roottoken apart from a component-scoped override. - 三种输出格式 – 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.
- 完全在浏览器中运行 – nothing is uploaded; works on private and unfinished stylesheets.
何时使用此工具
- 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.
常问问题
-
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.
