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 ビルトイン変数リファレンス