CSS カスタムプロパティ(変数)
create: 2019-12-25
CSS

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

謎のスタイル定義を発見

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

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 の中に出ていました。

よかった、まだ新しめ。