var()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

CSS の var() 関数は、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。

試してみましょう

var() 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。)

構文

関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの 2 番目の引数は、代替値として機能します。最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。

<var()> = 
  var( <custom-property-name> , <declaration-value>? )

メモ: 代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば var(--foo, red, blue) では、 red, blue を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。

値

<custom-property-name>

カスタムプロパティの名前で、 2 つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。

<declaration-value>

カスタムプロパティの代替値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり ), ], }, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。

例

:root に設定されたカスタムプロパティの使用

css
:root {
  --main-bg-color: pink;
}

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

プロパティが設定されていなかったときに使用するための代替値つきのカスタムプロパティ

css
/* 代替 */
/* コンポーネント内のスタイル: */
.component .header {
  color: var(
    --header-color,
    blue
  ); /* header-color という変数は設定されていないため、代替値である blue がセットされます */
}

.component .text {
  color: var(--text-color, black);
}

/* より規模の大きなアプリケーションのスタイルでは */
.component {
  --text-color: #080;
}

仕様書

Specification
CSS Custom Properties for Cascading Variables Module Level 1
# using-variables

ブラウザーの互換性

BCD tables only load in the browser

関連情報