ツールを実行
このツールは、提供されたCSSテキスト内のカスタムプロパティ（CSS変数）を分析します。二重ハイフンで始まる変数宣言と、var()関数による参照を自動的に認識し、それぞれの出現回数をカウントします。さらに、宣言されているもののどこからも参照されていない「未使用の変数」を特定することで、コードの整理や最適化をサポートします。入力欄にCSSコードを貼り付けるだけで、宣言の総数、参照の詳細、および未使用の変数リストが表示されます。構文エラーがある場合や入力が空の場合は処理されず、エラーメッセージが表示されます。ネットワーク通信を行わない環境で動作するため、外部サーバーへのデータ送信はありません。フロントエンド開発者がスタイルシートの保守性を高めるために利用できます。変数名の大文字小文字は区別され、正確に一致するもののみが参照としてカウントされます。複雑なネスト構造やメディアクエリ内の変数も適切にスキャン対象となります。結果は即時に計算され、画面下部の結果パネルに表示されます。不要な変数を削除することで、ファイルサイズを削減し、読み込み速度の改善に貢献します。チームでの共同作業時にも、誰がどの変数を使用しているかを明確にするのに役立ちます。
使い方
- CSSコードを含むテキストを入力欄に貼り付けます。
- 必要に応じて、解析対象のCSS断片を確認します。
- 「実行」ボタンをクリックして解析を開始します。
- 結果パネルに表示される宣言リストと参照カウントを確認します。
- 「未使用の宣言」セクションをチェックし、不要な変数を特定します。
使用例
- :root { --main-color: #333; --spacing: 10px; } .box { color: var(--main-color); margin: var(--spacing); }
- .header { --bg-color: blue; background: var(--bg-color); } .footer { --unused-var: red; }
よくある質問
どのようなCSS変数が検出されますか？
二重ハイフン（--）で始まり、コロンと値、そしてセミコロンが続く形式のカスタムプロパティ宣言が検出されます。
var()のフォールバック値は解析されますか？
いいえ、このツールはvar()内の参照名とその存在をカウントしますが、フォールバック値の評価や解決は行いません。
入力が空の場合どうなりますか？
CSS入力が空の場合、ツールは処理を実行せず、エラー結果を返します。有効なCSSテキストを入力してください。
このツールはブラウザ上で動作しますか？
ネットワーク通信を行わない環境で動作するように設計されています。入力データは外部サーバーに送信されません。