【CSS】CSSで変数使って楽をしよう

以前、CSSでカスタムプロパティが使えるようになっていたという記事を書いたのですが、IEが対応していないということはあるものの、試しに使ってみた結果、けっこう使い勝手がいいのではないかという結論に達しました。くり返し出てくるものを全部変数の中に突っ込めるというのが良い!です。SCSSを作るときに変数で定義してしまうのもありですが、CSS上でも変数になっていれば、管理が楽そうです。

CSSで変数を使う

CSSで変数を使うときは、:rootで定義してしまったほうが便利なようです。

:rootは、疑似要素の一つですが、HTMLの根っこ部分、つまり大本の部分になります。CSSとしては、htmlに設定しているような感じですね。この:rootの部分に変数を定義していきます。

CSSで変数の定義は、–(ハイフン2つ)で始まる文字列です。

呼び出すときは、

のように、var(変数)で使います。
サイト内でくり返し出てくるもの、基準としているものを変数で定義しておいて、var()で使うというのが今後の主流になりそうです。

変数についてくわしく知りたい方は、CSSの変数を使う(MDN)をご覧ください。

HTMLにSVGを組み込むとき、CSSの変数をそのまま使うということもできるようなので、メリットのほうが多いように思います。IEで非対応なこと、Edgeだとバグが多いということが、今のところネックでしょうか。