CSSカスタムプロパティ（CSS変数）

  • 投稿日
  • 著者 kngsmym
  • カテゴリー CSS

基本の使い方

定義

.foo {
  --my-text-color: black;
}

呼び出し

.foo {
  color: var(--my-text-color);
}

スコープ

基本はセレクタ内。

.foo {
  --my-text-color: black;
  color: var(--my-text-color);
  background-color: var(--my-text-color);
}

:root擬似クラスに指定してグローバルに使用することも可能。

:root {
  --bg-color: #efefef;
  --text-color: #999;
}
  
.foo {
  background-color: var(--bg-color);
  color: var(text-color);
}
  
.bar {
  background-color: var(--bg-color);
  color: var(--text-color);
}

入れ子可能

:root {
  --start-color: black;
  --end-color: white;
  --bg-gradient: linear-gradient(var(--start-color), var(--end-color));
}
.foo {
  background: var(--bg-gradient);
}

親子間での継承

変数値も通常のプロパティと同じような継承が行われる。

後に書いた強い記述で上書きされる。

以下のような記述の場合

<div class="parent">
  <p>parent</p>
  <div class="child__01">
    <p>child__01</p>
  </div>
  <div class="child__02">
    <p>child__02</p>
  </div>
</div>
:root {
  --text-color: black;
}
.parent p {
  color: var(--text-color);
}
.child__01 {
  --text-color: red;
}

.parent直下および変数設定の無いdiv内のpには:rootで指定された変数値が適用されて黒で表示されるが、変数を再定義したdiv.child__01では.parent pのcolor指定が再定義された変数値で上書きされて赤で表示される。

parent

child__01

child__02

フォールバック

変数値が無効な場合の値をvar側で指定できる。

.foo {
  color: var(--text-color-01, var(--text-color-02, black)); 
}

フォールバックに別の変数を指定することは可能だが、その場合再度varに包む必要あり。

上記の例では–text-color-01がない場合var(–text-color-02)を見て、–text-color-02も無効な場合はblackが適用されるイメージ。

JS

CSS変数はJSから直接扱えて、そのための関数が存在する。詳しくは使うときになったら調べることにする。

css