CSS変数の使い方

使い方を簡単に説明すると、ハイフン2つの変数名と適当なCSSプロパティーの値（例えば、--color: #ffffff;）で変数を宣言します。
宣言した変数を使うにはvar()関数（例えば、background-color: var(--color);）で使うことができます。

詳しく見ていきましょう。

CSS
コピー
.sample{
    --color: #ffff00;
}

CSS
コピー
:root{
    --color: #ffff00;
}

CSS
コピー
.sample{
    background-color: var(--color);
}

CSS
コピー
.sample{
    /* --colorが定義されていなければ#ffff00が適用される */
    background-color: var(--color, #ffff00);
}

CSS変数をJavaScriptで使う方法

CSS変数はJavaScriptでも操作できます。
ここでは、CSS変数の値を取得する方法と値を変更する方法を解説します。

仮にHTMLとCSSとJavaScriptは次のように書きます。

HTML
コピー
<div class="sample"></div>

CSS
コピー
:root {
    --bg-color: #ff0000;
}
 
.sample {
    background-color: var(--bg-color);
    width: 50px;
    height: 50px;
}

JavaScript
コピー
// CSS変数の値を変更する
const element = document.querySelector('.sample');
const style = getComputedStyle(element);
const property = style.getPropertyValue('--bg-color').trim();
 
console.log(property); // #ff0000
 
// CSS変数の値を変更する
document.documentElement.style.setProperty('--bg-color', '#0000ff');

実装サンプル

赤色のboxがJavaScriptによって青色に変わっているのが確認できるでしょうか？

CSS変数のブラウザサポート状況

IE以外は新しいバージョンであればサポートされているようですね。
IEを気にしなければ問題なく使えそうです。

以下の表がブラウザサポート状況です。※2022年1月8日時点

最新のサポート状況は「Can I use」にて確認できます。

–* ： https://caniuse.com/?search=–*
var() ： https://caniuse.com/?search=var()

まとめ

この記事では、CSS変数の使い方を解説してきました。
CSS変数を使いこなせるようになれば後から変更があっても1か所の編集で済むので保守性が高くなりそうですね。