CSSカスタムプロパティ抽出ツール
スタイルシート内で宣言されたすべてのCSSカスタムプロパティ(--variable)を抽出し、宣言された値とvar()経由での参照回数を表示します。design systemの監査や未使用の変数を見つけるのに便利です。
入力
出力
| プロパティ名 | 宣言された値 | 使用回数 |
|---|---|---|
| No data yet | ||
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-custom-property-extractor \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": ":root {\n --primary-color: #464aff;\n --spacing:…"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-custom-property-extractor` tool (CSS Custom Property Extractor) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-custom-property-extractor/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSカスタムプロパティ抽出ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSSカスタムプロパティとは?
CSSカスタムプロパティ — 一般的にはCSS変数と呼ばれます — は--プレフィックス付きで宣言された値(--primary-color: #464aff;)であり、var(--primary-color)で他の場所で使用されます。これらは色パレット、スペーシングスケール、タイポグラフィ、テーマング(prefers-color-schemeダークモードのオーバーライドを含む)のデザイントークンを支援し、単一の宣言がそれが参照されるすべての場所を更新することを可能にします。
この柔軟性には代償があります。スタイルシートが成長するにつれて、ソースコードを読むだけで単純な質問に答えるのが難しくなります — どの変数が実際に存在するのか、どの値に決めたのか、そしてこれを誰かが使用していますか?このツールは3つすべてに一目で答えます。
このツールの動作
CSSまたはSCSSファイルを貼り付け(またはアップロード)して、ツールがそれをスキャンします:
- 宣言 — 最初に表示される順序で、すべての
--property-name: value;ペア。 - 使用法 — すべての
var(--property-name)参照、プロパティごとにカウント。
結果は、各カスタムプロパティ、その宣言値、およびvar()を介した使用回数の表です — 合計の1行の概要もあります。宣言されても参照されていないプロパティ(使用回数0)は、削除しても安全な未使用コードの強い兆候です。
なぜカスタムプロパティを抽出・監査するのか?
- Design system監査。 トークンリストがデザイン仕様と一致することを確認し、トークンシステムの外部に紛れ込んだ1回限りの色やスペーシング値をキャッチします。
- 未使用変数の検出。 使用回数
0は、誰も参照していない変数をマークします — クリーンアップパスやCSSバンドルサイズの削減前に便利です。 - オンボーディングとドキュメント。 コードベースが定義するすべてのトークンの簡単なリファレンスを生成し、
:rootブロックを手動で探す必要がありません。 - リファクタリング安全性チェック。 変数の名前変更または削除の前に、それがまさにどこで参照されているかを確認してください。
使い方
- CSSまたはSCSSを入力ボックスに貼り付けるか、
.css/.scssファイルをアップローダーにドラッグします。 - 入力時にテーブルが自動的に更新されます — クリックするボタンはありません。
- 結果をCSVとしてコピーまたはダウンロードして、design system監査ドキュメントまたはクリーンアップチケットに使用します。
FAQ
SCSSの$variablesやネストを理解していますか?
いいえ — ネイティブCSSカスタムプロパティのみが一致します(--name構文)。Sass変数($name)とCSSプリプロセッサ機能は解析されません。ブラウザに到達する前にコンパイルされるためです。
プロパティが宣言または使用されたセレクターを追跡していますか?
いいえ — これはスタイルシート全体の単純なスキャンです。ダークモード用に@mediaブロックで再宣言されたプロパティは1行のままです(最後に宣言された値が優先)。任意のルール内での使用はそのプロパティの合計にカウントされます。
var(--gap, 8px)のようにフォールバック値はカウントされますか?
はい — フォールバック引数は、使用が--gapへの参照としてカウントされるのを妨げません。
プライバシー
すべてはブラウザ内でローカルに実行されます。あなたのCSSはアップロードまたは保存されることはありません。