【CSS】変数 - 再利用可能な値

CSSの変数について解説します。

検証環境

CSS

macOS

14.1

変数

変数は“記憶領域”です。

値の記憶や取得が可能で、プロパティの値に使用します。

CSSで変数を扱うには『定義』と『展開』を行います。

定義

変数名と記憶する値を定義します。

基本構文

スコープ要素 {
    --変数名: 値;
}

スコープ要素は変数の適用範囲です。

全体に適用するには擬似クラス/rootを使います。

サンプル

sample.css

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

展開

変数に記憶した値を展開（プロパティの値に使用）します。

基本構文

セレクター {
    プロパティ名: var(--変数名);
}

サンプル

sample.css

h1 {
    color: var(--main-color);
}

サンプル

適用範囲:全体

全体で利用できる変数を定義し、展開するサンプルです。

sample.html

<style>
___ih_hl_start
:root {
    --main-color: red;
}
___ih_hl_end

p {
    ___ih_hl_start
    color: var(--main-color);
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

適用範囲:任意要素

containerクラスの要素内のみで適用可能な変数を定義し、展開するサンプルです。

sample.html

<style>
___ih_hl_start
.container {
    --main-color: red;
}
___ih_hl_end
p {
    ___ih_hl_start
    color: var(--main-color);
    ___ih_hl_end
}
</style>

<div class="container">
    <p>CSS : Cascading Style Sheets</p>
</div>
<hr>
<p>CSS : Cascading Style Sheets</p>

プレビュー