CSSのカスタムプロパティ（CSS変数）を使ってみよう

CSSの便利な変数機能を使ってみよう。

Sassなどを使用して使っていたCSSの変数ですが、カスタムプロパティ(CSS変数)を使うとSassなどを使わずにそのまま使用することが可能です。

記述方法

:root {
  --mainColor: #dddddd;/* 指定する記述 */
}

body {arigatougozai
  color: var(--mainColor);/* 使用する記述 */
}

これで使うことが出来ます。簡単ですね。

テキストの色や背景のベース色など登録しておくと、使い回しが簡単にでき良さそうです。

もし、設定したカスタムプロパティに値がセットされていなかった場合用の代替値設定ができます。

div {
  color: var(--mainColor,red); /* --mainColorが定義されていない場合はred */
}

一見この記述をすれば対応していないブラウザでの指定に使えそうですが、使えないブラウザではそもそもこのプロパティが適用されないので代替値が反映されることはありません。

基本的にはIE以外には使えるためIEを気にしないなら大丈夫そうです。

まだIEを気にしないといけないという場合は、webpackなどにpostcss-preset-envを入れて使うと使えないブラウザへの補完もしてくれるので気にせず使用できます。

:root {
  --mainColor: #ff00cc;
}
p {
  color: var(--mainColor);
  color: #ff00cc;/* このように補完してくれます */
}