CSSの変数を使う

この文章はhttps://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variablesを参考します。

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

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);
 }

ノート： 初期仕様のカスタムプロパティの接頭辞は var- でしたが、最新の仕様では -- に変更されました。Firefox 31 以上は最新仕様に従っています。（バグ 985838）

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;
 }

これを下の HTML に適用します:

<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);
 }

この結果は前の例と同じになるはずです。 望んだプロパティを 1 つの標準的な宣言で実現することができます。

CSS 変数の継承

カスタムプロパティは継承します。これはつまり、もし与えられた要素にカスタムプロパティの値がない場合、その値は親の値を使用するということです。

 <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 構文に対応しています。