CSSの変数を使う

CSS 変数は、CSS 作者によって作成され、ドキュメント全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法（たとえば、--main-color: black;）によって設定し、var() 関数（たとえば、color: var(--main-color);）を使ってアクセスします。

複雑な Web サイトには、膨大な量の CSS があり、しばしば同じ値が使われています。たとえば、同じ色が異なる場所で数百使われており、色を変更する場合、グローバルに検索し、置き換えをしなくてはいけません。CSS 変数を使えば、1 箇所に値を保存しておき、複数の場所から参照できます。更なるメリットとして、意味的な識別をしやすくなります。たとえば、--main-text-color は #00ff00 より理解しやすいでしょう。とりわけ、同じ色がさまざまなコンテキストで使われる場合はそうです。

CSS 変数はカスケードの対象であり、親からの値を継承します。

基本的な使用方法

変数を宣言します:

element {
  --main-bg-color: brown;
}

変数を使用します:

element {
  background-color: var(--main-bg-color);
}

CSS 変数の最初のステップ

それぞれ異なるクラスの要素に同じ色を付けるシンプルな CSS を考えてみましょう。

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

CSS 中に同じ宣言が繰り返し出てくることがわかるでしょうか。いろいろな場所で background color に brown を設定しています。カスケードの上流で変数を宣言し、継承を利用することでこの問題を自然に解決することもできます。大きなプロジェクトでは、常にこの手法が取れるわけではありません。:root 擬似クラスで変数を宣言することにより、変数を利用して CSS 作者は同じ値を繰り返し書くことをやめることができるのです。

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

<div class="one">
  <div class="two">
    <div class="three">
    </div>
    <div class="four">
    </div>
  <div>
</div>

に下記の CSS を適用します。

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

この場合、var(--test) の結果は:

• class="two" の要素： 10px
• class="three" の要素： 2em
• class="four" の要素： 10px（親から継承した）
• class="one" の要素； 無効な値、これはすべてのカスタムプロパティのデフォルト値です。

値と妥当性

古典的な CSS の妥当性のコンセプトとして、（値が）それぞれのプロパティに縛られているというものがあります。これはカスタムプロパティに関してはあまり使いやすいものではありません。カスタムプロパティの値が解析されるとき、ブラウザはそれがどこで使用されるのか知りません。そのため、ほぼすべての値を有効なものとみなす必要があります。

残念ながら、これらの有効な値は、var() 関数表記を使用して、それらが意味をなさないかもしれないコンテクストで使用できてしまいます。プロパティとカスタム変数が無効な CSS ステートメントを生成する可能性があることから、計算時の妥当性確認という新しいコンセプトが導かれます。

ブラウザ実装状況

[1] 最初、Chrome では、この機能を異なる構文で実装しており、CSS 変数を定義するために カスタムプロパティ名に -webkit-var- を必要としていました。その後、CSS 変数は -webkit-var() 関数内で接頭辞なしで使用できるようになりました。次いで、この実装は chrome://flags 下の Enable experimental WebKit features フラグでの切り替えの対象となりました。このフラグは、後に Enable experimental Web Platform features に変更されました。

[2] Chrome 34.0 では、パフォーマンスの問題のためこの機能は削除されています。

[3] Gecko 29 では、この機能は layout.css.variables.enabled 設定下で実装されていました。既定では false で、古い var-variablename 構文が使われています。Gecko 31 から、既定で設定が使用できるようになっており、新しい --variablename 構文に対応しています。