ネイティブ CSS で変数を使う方法

CSS で JavaScript 等のように変数を用いるためには、CSS の拡張(Sass 等)を使用しなければ利用することが出来ませんでした。

ただ、将来的にはネイティブな CSS でも使える可能性があって、いくつかのブラウザは実験段階ですが、すでに変数機能を使うことが出来ます。

css-variables

CSS Variables(CSS の変数

CSS

body {
    --main-color: #eee;
}
 
body main {
    background-color: var(--main-color);
}
 
body footer {
    color: var(--main-color);
}

使い方はそんなに複雑ではありません。

変数を使いたい要素の親(正確には自分以上)より上に変数を設定します。上の例では body に設定しています。

ハイフン(-)を2個(--)続けて、その後に変数名を入れます。上記の例では「main-color」。その変数を使う場合は、var でカッコ内に変数名を入れることで代入されます。--main-color に「#eee」が入りますので、背景色(back-ground-color)でも文字色(color)でも使うことが出来ます。

変数は色だけに限らず

--main-px: 4px;
--main-position: center;
--test: 1.9;

など何でも大丈夫で、「--」から始まることさえ守っていれば変数として扱えるようです。

下記の参考ページでは「:root」に変数を設定することにより、HTML 要素全体で使えるようにしています。

参考:Using CSS variables

対応ブラウザ

今のところ

FireFox
GoogleChrome
Safari(Mac、iOS)

です。Firefoxはだいぶ前から利用可能でしたが、Chrome はも使えるようになりましたし、Safariも最近使えるようになりましたね。(2016年5月時点)

まだ実験段階の機能なので、使えなくなってしまう可能性は大いにありますし、規格が変わる可能性もありますが色々楽しみな機能です。IE 系がまだなので実際にバリバリ使えるのはまだ先の話かもしれませんが、iOS も対応ということで HTML ベースの iPhone アプリなどであれば使っても問題ないかもしれません。

参考:Can I use CSS Variables

Top