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 のスタイル管理が容易になります。この方法では、(時には異なるスタイルシートの) 複数のルールが同じ値を使用します。
var()
関数は、オプションでデフォルト値を受け入れます。UI システムは、変数を解決できない場合にデフォルト値を使用します。例えば、スタイルシートから変数を削除したが、その変数への参照を削除し忘れた場合などです。
変数のデフォルト値を指定するには、変数の値の後にカンマ ,
で区切って追加します。
以下の USS スニペットは --color-1
変数を呼び出します。UI システムがそれを解決できない場合は、赤の 16 進数の値 (#FF0000
) を使用します。
var(--color-1, #FF0000);
変数は、USS でも CSS とほぼ同じように動作します。CSS の変数についての詳しい情報は、MDN ドキュメント を参照してください。ただし、USS は CSS の一部の機能をサポートしません。
var()
関数をサポートしません。 background-color: rgb(var(--red), 0, 0);