CSS カスタムプロパティ(変数)

CSS 知識更新！
参考: MDN - CSS カスタムプロパティ (変数) の使用

謎のスタイル定義を発見

ある日、いつものようにスタイルをデバッグしていたときのこと。
適用スタイルの下の方に、見慣れない書き方の項目があるのに気づきました。

--blue ってなに？　そんなスタイルあったっけ？

CSS カスタムプロパティ (変数)とは

これは、 CSSカスタムプロパティ または CSSカスタム変数 といって、CSS 内で変数として記述する書き方だそうです。
CSS で変数の使い回しが出来ないと思いこんでいたので衝撃。

今まで sassやらlessやらじゃないと出来ないと思っていた CSS 内で使える変数が、実はブラウザでサポートされていたとは。

例によってInternet Explorerでは使えません。
ちょっと前のプロジェクトは IE 対応必須だったので、「CSS では変数が使えないので sass 使います」って言ったのは間違いではなかった。

使い方

とっても簡単。
どっかで定義して、どっかで使うだけ。
変数として宣言するときはプレフィックス -- をつけます。

.sample-code {  
  --main-color: #6610f2;  
  --main-color-invert: #eeeeee;  
}  
.main-color {  
  color: var(--main-color);  
  background: var(--main-color-invert);  
}  
.main-color-invert {  
  color: var(--main-color-invert);  
  background: var(--main-color);  
}  

みたいに定義して

<div class="sample-code">  
  <div class="main-color">メインカラー</div>  
  <div class="main-color-invert">メインカラー反転</div>  
</div>  
<div>  
  <div class="main-color">メインカラーにならない</div>  
  <div class="main-color-invert">メインカラー反転にならない</div>  
</div>  

と記述すれば、下記のように表示されます。

変数はカスケード適用される

CSS の変数はカスケードされるので、使いたいところだけで宣言することが出来ます。
上記の例だと .sample-code クラスで定義した変数なので、子孫要素では CSSプロパティが適用されていますが、.sample-codeの子孫ではない要素には反映されません。
:rootでグローバル宣言しても、CSS の仕組みで上書きできるのが便利です。

bodyに.dark とか .light とかつけてテーマの切り替えに使えそうですね。
今やってるプロジェクトでもそんな要件があるので使えそうです。

おまけ

ちょうど今日読んでいた Qiita の「JavaScript Advent Calendar 2019」の「3000 人に聞いた、2019 年最先端のフロントエンド開発者が使ってるツールはこれだ」
の CSS Feature Usage の中に出ていました。

よかった、まだ新しめ。