🕸️

【CSS】var() は代替値を設定できる

2025/01/16に公開

Web サイトを制作しています。
使用していたライブラリのスタイルを少し変えたくて適用されているスタイルを確認したところ

.component-style {
  width: var(--component-width, var(--component-size, 16px);
  height: var(--component-height, var(--component-size, 16px);
}

上記のように、var() 関数が入れ子構造になっていました。
今まで var(--variant) のように、何気なく使っていましたが、公式ドキュメントをあらためて確認すると、var() 関数では、代替値が設定できることを初めて知ったので備忘録としてまとめます。

要約

  • var() 関数は第2引数に値を設定することで代替値を設定することができる
  • 第1引数で指定した値が無効だった場合、代替値が適用される

var() 関数は代替値を設定することができる

var() 関数の用途としては、下記のように任意のプロパティに対して CSS 変数を適用する際に使用すると思います。

:root {
  --app-bg-color: #FAFAFA;
}

body {
  background-color: var(--app-bg-color);
}

ただ、var() 関数で指定した CSS 変数が未定義だった場合に、代替値を設定することができるので、初期値のようなものを設定することができます。

:root {
  --app-bg-color: #FAFAFA;
}

/* 初期値を指定 */
body {
  background-color: var(--app-original-bg-color, red);
}

/* 初期値に css 変数を指定する場合は、var() 関数を利用する */
body {
  background-color: var(--app-original-bg-color, var(--app-bg-color));
}

最後に

グローバルに変数を宣言してそれを呼び出すという使い方しかしてこなかったので、現状の使い方で利用するイメージはつきませんが新しく知ったことなので書きました。
公式ドキュメントも OSS のコードも読むべきですね。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/var

Discussion