CSS変数

CSS変数 とはなんぞや

CSSカスタムプロパティ。使い回すCSSの値を変数として宣言しておける。

基本的な使い方

任意のセレクタ内で --任意の名前: 任意のプロパティ値 のようにして変数宣言し、var(--任意の名前) のような形で呼び出す

// 　宣言して　
:root {
    --bg-color: brown;
}
// 呼び出す
.hoge {
    background-color: var(--bg-color);
}

なお、名前は大文字・小文字を区別する

補足

CSSらしく、継承や上書きといった特徴を持つ。

親要素から継承する

こういうHTML構造だとしたら

<div class="wrapper">
    <h1 class="heading">見出し</h1>
    <p class="text">本文テキスト</p>
</div>

このようにCSSを書ける

// 親要素で変数宣言して
.wrapper {
    --bg-color: brown;
}
// 子要素で呼び出せる
.heading {
    background-color: var(--bg-color);
}

上書きできる

メディアクエリと一緒に使うと便利

:root {
    --bg-color: red;
}
@media screen and (min-width: 768px) {
    :root {
        --bg-color: green;
    }
}
.hoge {
    background-color: var(--bg-color);
}

// => .hoge要素は、ブラウザの表示エリアが768px未満の時は背景が赤色に、768px以上の時は緑色になる

代替値が定義できる

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

// => --my-var が定義されていなければ redが適用される

calc() と組み合わせても使える

:root {
    --side-space: 30px;
}
.wrapper {
    width: calc(100% - var(--side-space) * 2);
}

よく使うシーン

コーディングを始める際に、最初にデザインをよ〜〜〜く見て、共通で使われている色やサイズ感等をまとめて変数化させる

:root {
    // 色
    --color-primary: red;
    --color-secondary: green;
    // 文字サイズ
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
}

参考