Create USS variables

You can create a USS variable and use it in other USS properties. When you update a USS variable, all of the USS properties that use that variable update. You can also specify default values for USS variables.

Create and use USS variables

USS 変数を作成するには、その名前の前にダブルハイフン (--) を付けます。

--color-1: red;

ある USS 変数の値を別の USS ルールで使用するには、var() 関数を使って呼び出します。

var(--color-1);

When you update a variable, it updates all the USS properties that use it.

例えば、以下の USS スニペットでは、2 つの色の変数を宣言する 1 つのスタイルルールと、それらの変数を使用する 2 つのスタイルルールを定義しています。

:root {
  --color-1: blue;
  --color-2: yellow;
}

.paragraph-regular {
  color: var(--color-1);
  background: var(--color-2);
  padding: 2px;
  }

.paragraph-reverse {
  color: var(--color-2);
  background: var(--color-1);
  padding: 2px;
  }

To update the color scheme, you can change the two variable values instead of the four color values.

変数を使用することで、複雑な UI のスタイル管理が容易になります。この方法では、(時には異なるスタイルシートの) 複数のルールが同じ値を使用します。

Specify default values for USS variables

var() 関数は、オプションでデフォルト値を受け入れます。UI システムは、変数を解決できない場合にデフォルト値を使用します。例えば、スタイルシートから変数を削除したが、その変数への参照を削除し忘れた場合などです。

To specify a default value for a variable, add it after the variable value, separated by a comma ,.

The following USS snippet calls the --color-1 variable. If the UI system can’t resolve the variable, it uses the hex value for red (#FF0000).

var(--color-1, #FF0000);

Differences from CSS variables

Variables work mostly the same way in USS as they do in CSS. For detailed information about CSS variables, see the MDN documentation. However, USS doesn’t support some of the functionalites of CSS:

USS doesn’t support the var() function inside of other functions, such as shown below:

  background-color: rgb(var(--red), 0, 0);

USS doesn’t support mathematical operations on variables.

その他の参考資料

USS のカスタムプロパティ (変数)

Introduction to USS built-in variables