CSSで変数を使うサンプル

CSS変数は、--（ハイフン2つ）から始まる名前で定義し、var()関数で呼び出します。

<style>
    :root {
        --main-color: green;
        --base-padding: 16px;
    }
    .button {
        background-color: var(--main-color);
        padding: var(--padding-base);
    }
</style>
<button class="button">送信</button>

変数と値を定義する

一般的に、サイト全体で使いたい場合は :root（HTMLの最上位要素）に記述します。
3,4行目は、変数です。

変数を使用する

定義した変数名を var() の中に入れます。
7,8行目は、var() の中に変数名を指定しています。

11行目のボタンに指定したCSSが反映されます。

CSS変数の主なメリット

メンテナンスが楽になる	背景色等を変えたい時、:rootの値を1つ変えるだけで全ページに反映されます。
コードの意図がわかりやすい	#FF0000と書くよりも--alert-redと書くほうが、何のための色か一目でわかります。
動的な変更が得意	JavaScriptを使って、ユーザーの操作に合わせて変数の値をリアルタイムで書き換えることができます。

フォールバック機能(fallback)

var(--変数名,予備の値)

.card {
  /* --card-margin が未定義なら 20px を使う */
  margin: var(--card-margin, 20px);
}

変数が定義されていなかった時のために、予備の値を設定しておくことができます。
--card-marginに30pxが指定されていたときは、30pxとなります。