このツールについて
CSSカスタムプロパティ（一般にCSS変数と呼ばれます）を使うと、ブランドカラーや余白の単位、フォントスタックなどの値を一度だけ定義し、var(--name) でどこでも再利用できます。繰り返し使う値を一箇所にまとめておけば、数十のファイルを検索・置換する代わりに :root レベルで一度編集するだけでスタイルシート全体に反映されます。また、カスタムプロパティはDOM上のライブな値なので、JavaScriptやメディアクエリが実行時に読み取ったり書き換えたりでき、CSSに触れずに瞬時のテーマ切り替え、ダークモードの切り替え、ユーザーが調整できる余白などを実現できます。
下の各行に名前と値を入力してください。このツールはすべての名前を自動的にサニタイズし、余分な先頭の「--」を取り除き、無効な文字をハイフンに置き換えるので、プレフィックスの付け忘れや余分なスペースといったタイプミスが生成結果を壊すことはありません。生成された :root { ... } の出力をそのままスタイルシートにコピーするか、単独の .css ファイルとしてダウンロードして必要な場所で @import できます。入力と同時にすべてブラウザ内で処理され、どこにもアップロードされません。
よくある質問
これで値がどこかにアップロードされますか？
いいえ。すべてブラウザ内でローカルに実行され、名前と値のペアがデバイスから出ることはありません。
:root ではなく特定のセレクターに変数のスコープを設定できますか？
はい。カスタムセレクターを設定すると、生成されるCSSブロックは :root の代わりにそれを使用します。