CSSで変数を使ってみる

CSSで変数を定義できるカスタムプロパティを使ってみます。

対応ブラウザ

対応ブラウザはこちら
IEで非対応になります。

サンプルコード

カスタムプロパティは、ハイフン2つから始まるカスタムプロパティ名とCSSのプロパティ値で設定します。
その際、:rootに対して設定するとどこでも使用できるようになります。

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

使用の際は、プロパティ値の代わりにvar()でカスタムプロパティ名を指定します。

<p class="sample">テスト</p>

.sample {
	color: var(--main-color);
}

これでカスタムプロパティを使った指定ができました。
カスタムプロパティのデモページ

先ほどは:rootに対してカスタムプロパティを設定しましたが、別の要素に対して設定することもできます。

.sample-box {
	--main-bg-color: skyblue;
}
p {
	background-color: var(--main-bg-color);
}

この場合、.sample-box外にあるpに対しては変数が適用されません。

<div class="sample-box">
	<p>.sample-box内のテスト</p>
</div>
<p>.sample-box外のテスト</p>

カスタムプロパティのデモページ2

var()を使用する際、指定したカスタムプロパティが定義されていない場合の代替値を設定することもできます。
カンマで区切って指定します。

.sample-box {
	--main-bg-color: skyblue;
}
p {
	background-color: var(--main-bg-color, gold);
}

カスタムプロパティのデモページ3