USS 変数の作成

USS 変数を作成し、他の USS プロパティで使用することができます。USS 変数を更新すると、その変数を使用するすべての USS プロパティが更新されます。USS 変数にはデフォルト値も指定できます。

USS 変数の作成と使用

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

--color-1: red;

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

var(--color-1);

変数を更新すると、それを使用しているすべての USS プロパティも更新されます。

例えば、以下の 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;
  }

カラースキームを更新するには、4 つの色の値ではなく、2 つの変数の値を変更します。

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

USS 変数のデフォルト値を指定

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

変数のデフォルト値を指定するには、変数の値の後にカンマ , で区切って追加します。

以下の USS スニペットは、--color-1 変数を呼び出します。UI システムが変数を解決できない場合、16 進数値の赤 (#FF0000) が使用されます。

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

CSS の変数との相違点

変数は、USS でも CSS とほぼ同じように動作します。CSS の変数の詳細については、MDN ドキュメント を参照してください。ただし、USS は CSS の機能の一部をサポートしていません。

• USS は、以下に示すように、他の関数内の var() 機能をサポートしていません。

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

• USS は変数の数学演算をサポートしていません。

追加リソース

• USS ビルトイン変数の概要
• USS ビルトイン変数のリファレンス