cssに変数？

いつの頃からかcssに変数が使えるようになっているのですがweb制作の現場ではWindows IE11が対応していないので使用することがありませんでした。

が、そもそもweb系のクリエイティブはMacで行うことが多いと思います。

なので日常ではcss変数を使っての使っても良いのではないかと思うようになりました。

（どうせ仕事として納品する時にはコンパイルという作業が入ってくるのでcss変数もコンパイルすれば良いじゃんという考え方です。）

ということでcss変数を使ってみます。

とても簡単です。

css変数の宣言

*{
	--hoge: red;
	--fuga: #9a9a9a;
}

css変数の利用

.myclass{
	color: var(--hoge);
	border: 1px solid var(--fuga);
}
.waku{
	border: 5px solid var(--fuga);
}

変数の宣言は次のように :root と記述してもいいようです

:root {
	--hoge: red;
}

今後ブラウザの対応が追いつけば普通に使用することになるので今から先取りしておくのも良いのではと思います。

css変数が使えないブラウザ

こちらの can i use のサイトから確認できます。

http://caniuse.com/#feat=css-variables