個人的「質はともかく継続する」3日目です。

CSSで変数を扱う

いまでは当然といえば当然なんですが、
かつてはCSSで変数を扱うとなるとSCSSやSass等のメタ言語を使う必要がありました。
しかしCSSがアップデートされ、いまは素のCSSで変数に相当する「カスタムプロパティ」が
扱えるようになりました。
これがあるとCSSの設計やコーディングが非常に楽になるので、自己学習も兼ねてメモ記事にしてみます。

まずは実例

See the Pen css_custom_property by pluscolor (@pluscolor) on CodePen.

書き方

プロパティの宣言

プロパティの宣言自体は単純です。
適応させたいスコープの中で、--のあとにプロパティ名と値を記入するだけ。
以下の書き方だと　sample 内でのみ有効になります。

.sample {
  --font-large: 48px;
  font-size: var(--font-large);
  }

/*スコープ外なので適応されない
.outofscope {
  font-size: var(--font-large);
  }

全体に適応する場合は擬似クラスを使って以下のように書きます。

:root {
  --color-orange: orange;
  }

注意点

大文字・小文字を区別します。
--color-orange と　--Color-orange は別のプロパティとして扱われます。

使い方

使い方は適応させたい箇所をvar()で囲って宣言するだけ。

.fruit {
  background-color: var(--color-orange);
  }

注意点

先ほども書きましたが、スコープに注意です。
クラス内で宣言したものはクラス内でしか使えません。

まとめ

CSSを書いていくと同じ値を何度も使い回すシーンがあると思います。
そういうときに、プログラミング的に共通で利用するカスタムプロパティを用意しておけば
視認性も保守性も高くなって便利だと思います。

ベテランほど知らなかったりするので、ちょくちょくと広めて行きたいな。