CSSの変数の使い方【現役エンジニアが解説】

PROGRAM

今回は、CSSの変数の使い方について、宣言と使用方法に分け、簡単に解説していきます。

変数の宣言

変数はプロパティとして名前の先頭に–を付け、値を指定します

変数をどこにでも使えるようにするには、:rootの擬似クラスを使用します。

:root{
    --hoge-color-red:red;
}

上記のコードでは、全体で使える値がredの–hoge-color-redという変数を宣言しています。

変数の使用方法

宣言した変数は、プロパティの値の部分で指定し、使うことができます。

プロパティの値で変数を使う際には、var(変数名)と指定する必要があります。

.hoge{
    color:var(--hoge-color-red);
}

上記のコードでは、hogeのクラスの要素のcolorプロパティに–hoge-color-redという変数の値を適用しています。

JavaScriptからのCSSの変数の使い方

JavaScriptからgetPropertyValueメソッドでCSSの変数の値を取得できます。

また、setPropertyメソッドを使うことで、CSSの変数に値を設定することもできます。

console.log(document.documentElement.style.getPropertyValue("--hoge-color-red")); // CSSの変数の値の取得
document.documentElement.style.setProperty("--hoge-color-red", "blue"); // CSSの変数の値の設定

上記のコードでは、HTML文書全体で使えるようになっているCSSの変数の値の取得と設定をそれぞれで行っています。