2019-12-25

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

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

よかった、まだ新しめ。


猫派 / 基本インドア / ガジェット大好き / RDP推進派
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:Factorio / BeatSaber / にゃんこ大戦争

→ Policy