CSS 変数ジェネレーター

出力されるもの

行をいくつ入力しても、出力は一つの :root ブロックです。グループ（カラー、タイポグラフィ、スペーシング、角丸）の順に、グループ内の行の順で宣言が並び、変数名が空の行は出力されません。値は前後の空白を取り除いたうえで入力どおりに書き出され、CSS として正しいかどうかは確認しません。ページを開いたときの初期行をそのままコピーすると次のとおりです。

:root {
  --primary: #3b82f6;
  --secondary: #6366f1;
  --bg: #ffffff;
  --text: #111827;
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

例：デジタル庁デザインシステムのトークンを書き写す

デジタル庁デザインシステム（DADS）は、デザイントークンを npm パッケージ @digital-go-jp/design-tokens として公開しています。バージョン 2.0.1 の dist/tokens.css には、--color-primitive-blue-900: #0017c1; のような原色のトークンと、それを var() で参照する --color-key-900: var(--color-primitive-blue-900); のような役割別のトークンが並んでいます。

自社サイトで一部だけ使いたい場合、プレフィックスを --color にして三行入力すると、パッケージと同じ行が得られます。

:root {
  --color-primitive-blue-900: #0017c1;
  --color-primitive-yellow-300: #ffd43d;
  --color-key-900: var(--color-primitive-blue-900);
}

--color-key-900 は固有の色の値を持たず、原色のトークンを参照しているだけです。キーカラーを別の青に替えるときは、--color-key-900 の参照先を書き換えるだけで、それを使う部品がすべて追従します。値の欄に書いた var() はそのままコピーされます。

文字サイズと角丸も同じ方法で写せます。DADS の値は rem で書かれているので、ルートのフォントサイズが 16px のとき 1rem が 16px です。プレフィックスを既定の -- に戻し、タイポグラフィと角丸のグループに入力します。

:root {
  --font-size-16: 1rem;
  --font-size-24: 1.5rem;
  --border-radius-8: 0.5rem;
}

IME の全角スペースと全角数字

日本語入力のまま変数名を打つと、空白が全角スペース（U+3000）になりがちです。このツールは名前の中の空白をハイフンに置き換え、全角スペースも空白として扱うので、primary　color は --primary-color になります。一方、値の欄は入力どおりにコピーされるため、全角数字で １６px と書くとそのまま残ります。

:root {
  --primary-color: #0017c1;
  --space: １６px;
}

--space の宣言そのものはカスタムプロパティとして受け付けられますが、全角の「１６」は CSS の数字ではありません。padding: var(--space) と書くと、置き換えた結果が padding の値として成り立たず、計算値の時点で無効になり、padding は初期値の 0 になります（CSS Custom Properties Level 1 §3.1）。数値は半角で入力してください。

制限

• 出力は :root ブロック一つだけです。ダークテーマ、メディアクエリ、@property の登録、JSON や Sass 形式は生成しないので、必要なら別のブロックを手で書き足します。
• グループは 4 つで固定です。各グループの中で行を追加・削除できます。
• 値は検証しません。同じ名前の行が二つあると両方出力され、CSS の規則どおり後の宣言が有効になります。
• 名前は大文字と小文字を区別します。var(--Primary) で --primary は読めません。
• var() の第二引数（代替値）が使われるのは変数が未定義のときだけです。--gap: red のように使えない値が入っていると、代替値ではなく上記と同じく計算値時点で無効になります。
• カラーピッカーの色が連動するのは 3 桁と 6 桁の HEX だけです。rgb() や oklch() も正しくコピーされますが、色見本は変わりません。
• ツール内で Ctrl/⌘+L を押すと、プレフィックス・変数名・値がすべて空になります。行とカラーピッカーの色は残ります。

カスタムプロパティと var() は Chrome 49、Firefox 31、Safari 9.1、Edge 15 以降で使えます（MDN の互換性データ）。一つの色から濃淡の段階を作るならカラーシェード生成器、画面幅に応じて変わるサイズは CSS clamp() 計算機の値を貼り付けて使えます。