広告が嫌いですか? 行く広告なし今日 

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.
を使用して、よく使用されるヘッダーをデフォルト値とともに挿入します。認証セクションで認証タイプと認証情報を設定し、カスタムヘッダーを手動で追加します。curl、Postman、またはコードで使用するための完全なヘッダーセットをコピーします。 Filter 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 :root token apart from a component-scoped override.
3つの出力フォーマット – 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.