普段はSassに用意されている変数を使っていたのですが、先日ツイッターのタイムラインでCSS変数を使うメリットなどが紹介されているのを見て、これまでほとんど使ってこなかったCSS変数は実はとても便利なものでは？と思い、今更ですが改めて色々と調べてみましたのでまとめてみたいと思います。  

CSS変数（カスタムプロパティ）の基本的な使い方

CSSのプロパティと同じように記述しますが、カスタムプロパティの場合には2つのハイフンに続けて変数名を書きます。そのあとに変数に含む値を定義します。これらを対象となるセレクタに指定する形になります。通常のCSSでのスタイルと同じくそのセレクタ内をスコープとして使えるようになります。

対象のセレクタ {
  --定義する変数名: 値;
}

  ただ、下記のように:root擬似クラスをセレクタとすることで、全ての要素で使い回せるようにしておくと便利ということで一般的にはこのように定義されていることが多いようですね。

:root {
  --default-font-color: red;
  --primary-font-color: blue;
}

  定義したCSS変数は、プロパティの値としてvar()関数を使うことで呼び出せることができます。var()関数の引数に対象となる変数名を指定します。こうすることで変数内の値を利用できるようになります。

p {
  color: var(--default-font-color);
}

  もし、指定した変数の値が未定義の場合などで使えない場合には、フォールバックとして代替値を指定しておくとその値が適用されるようになります。この代替値にもCSS変数を使うことができ、さらに入れ子で指定することも可能です。

// CSS変数の値が未定義の場合には、代替値のblackが適用される
p {
  color: var(--default-font-color, black);
}

// --default-font-color（red）→ --primary-font-color（blue）→ 未定義時の代替値（black）の順に適用
p {
  color: var(--default-font-color, var(--primary-font-color), black);
}

  このように通常のプロパティと同じような形でCSS変数を定義でき、呼び出すときもvar()関数だけで可能なため、導入コストは比較的低いのではないでしょうか。またCSS変数はあくまでスタイルのプロパティとして扱われるため、親要素のスタイルでCSS変数を使っていた場合にはその値が子要素にも継承されます。  

JavaScriptでCSS変数値を取得したり動的に変更させる

これだけだとSassの変数とあまり変わらないためそこまでメリットは感じられないかもしれませんが、CSS変数はプロパティの一種として扱われるため、JavaScriptを使って変数の値を取得したり、動的に変更させられることが大きな利点になるのではないでしょうか。例として下記のように:root擬似クラスでCSS変数が適用されている場合を見ていきます。

:root {
--default-font-color: red;
}

  ここではHTML要素のプロパティとして設定されていることになるので、JavaScriptでHTML要素のスタイルに対して、getPropertyValue()メソッドを使うことで、指定したプロパティ（CSS変数名）の値を取得できます。その際には、getComputedStyle()メソッドでスタイルをあらかじめ取得しておく必要がありますので注意します。

// 変数名を指定してCSS変数の値を取得
const styleVariable = getComputedStyle(document.documentElement).getPropertyValue('--default-font-color');

// 変数名を指定してCSS変数の値を更新
document.documentElement.style.setProperty('--default-color', 'red')

  同じように、CSS変数を持つ要素に対して、setProperty()メソッドを使えばプロパティの値を設定することもできますので、このようにCSS変数の値を変更することが可能です。このような操作を特定のイベントリスナーで実行させることで、動的にCSS変数の値を更新することができますね。  

Sassの@functionの引数にCSS変数を使う際には注意

CSS変数はSassの機能ではなくCSSネイティブの機能となるため、Sassの変数とは少し扱いが異なるので注意が必要です。例えば下記のように、Sassの@functionなどの引数ですが、この引数にCSS変数を入れるとそのまま文字列となるので正しい処理ができない場合もあります。

:root {
  --font-S: 12px;
}
@function font-size-function($font-size) {
  @return $font-size * 1vw;
}
p {
  font-size: font-size-function(var(--font-S));
}

// 引数の値が文字列としてそのまま出力されるため計算エラーとなる
Error: Undefined operation "var(--font-S) * 1vw".

  このような場合にはSassの変数を使う形になりますね。そもそも、@functionはSassの機能になり、コンパイルして使う前提になるのでCSS変数を使うことの方が違和感がありますが、、  

IE11への対応方法

とても便利なCSS変数ですが、残念なことにIE11には対応していないようです。そのためIE11でもCSS変数を使えるようにするためには下記のように別途ポリフィルが必要になります。 【css-vars-ponyfill】 https://github.com/jhildenbiddle/css-vars-ponyfill   CSS変数用のポリフィルはいろんな種類のものがあるようですが、それぞれ仕様なども微妙に異なるようですのであらかじめ確認しておく必要があります。  

CSS変数の値指定にSassの変数を適用する

CSS変数を使う際に値だけはSassの変数を使いたいというケースもあるかと思います。そんな時には値にそのままSassの変数を指定するだけでは機能しません。ですのでSassの変数を#{}で囲んで上げる必要があります。

$default-color: #333;
:root {
  --default-color: #{$default-color};
}

  これでCSS変数の値にSassの変数が使えるようになります。固定値ではなく変数値となるのでこのような対応が必要になるということですね。  

CSS変数で出力した値に後から単位を設定する

CSS変数で数値のみの値となっていて、後から任意の単位を設定するというケースではそのまま単位をつけても正しく認識されません。ですのでその場合には、calc()関数を使って単位をつけた上で1を掛けるなどの工夫が必要になります。

:root {
  --screen-size: 768
}
div {
  width: calc( var(--screen-size) * 1px)
}

  この辺りは少し不親切な気もしますが、、自由に単位を切り替えられることもできるので覚えておくといいですね。  

---

  今回はCSS変数の使い方や特徴、また注意点などについてまとめてみました。これまで変数はSassの変数を使うことが多かったのですが、DartSassへの移行に伴い変数を使う際に名前空間の指定が必須になったり、JavaScriptでも扱えたりできるとのことで変数に関してはCSS変数を使うメリットの方が大きいのかなと思いました。と言ってもSassにはmixinや条件分岐、繰り返しなどいろんな便利機能がありますので、そのような処理はSass側で行うなど使い分けることがベストではないでしょうか。   【参考にさせていただいたサイト】 Web制作がめっちゃ捗る！CSS変数の基礎と実践テクニック