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

CSS変数を使ってみます。

例えば、CSSでテーマカラーなど同じ値を複数個所のプロパティに設定する場合、管理が煩雑になりますね。

body{
	color: #333333;
}
a{
	color: #333333;
}
table{
	border-color: #333333;
}

これまでは、sassで変数を管理していました。
ただ、最近はCSSのみで変数（カスタムプロパティ）が使えるようになったようです。

先ほどの例をCSS変数で記述すると、以下のようになります。

:root{
	--black: #333333;
}
body{
	color: var(--black);
}
a{
	color: var(--black);
}
table{
	border-color: var(--black);
}

「:root」はスタイル全体に適用、つまり、グローバル変数のようなイメージです。
変数には先頭にハイフン「-」を2つ付けます。
変数を呼び出すには、各プロパティの値にvar関数で変数名を指定します。

対応ブラウザは、IE以外は動作するようなので問題ないですね。
うまく活用すれば、sassを使わなくてもある程度テーマ管理できそうですね。