🎨 CSS変数抽出器

使い方

1. CSSスタイルコードを入力します。
2. 変数抽出を実行します。
3. 抽出された変数名をワンクリックでコピーして使用します。

よくある質問

どのような形式でコピーされますか？

対応する「var(--変数名)」のフォーマットでコピーされるため、スタイル設定にすぐ使えます。

:rootではなく.dark-modeのような特定のクラスの中に宣言された変数も抽出されますか?

はい、:rootに限らずどの選択子の中に書かれていても、--で始まるCSSカスタムプロパティの宣言パターン自体を探して抽出するため、.dark-modeや[data-theme="dark"]のような特定のクラスやセレクタの中で定義されたテーマ変数も同様にリストに含まれます。ただし、どの選択子に属していたかの区別なく変数名と値だけが列挙されるため、同じ名前の変数が複数のセレクタで異なる値として宣言されている場合、結果に複数回表示されることがあります。

:rootではなく.dark-modeのような特定のクラスの中に宣言された変数も抽出されますか?

はい、:rootに限らずどの選択子の中に書かれていても、--で始まるCSSカスタムプロパティの宣言パターン自体を探して抽出するため、.dark-modeや[data-theme="dark"]のような特定のクラスやセレクタの中で定義されたテーマ変数も同様にリストに含まれます。ただし、どの選択子に属していたかの区別なく変数名と値だけが列挙されるため、同じ名前の変数が複数のセレクタで異なる値として宣言されている場合、結果に複数回表示されることがあります。