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

USS 変数は、カスタムプロパティとも呼ばれ、他の USS ルールで再利用できる値を定義します。あらゆるタイプの USS プロパティに対して変数を作成することができます。

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

--color-1: red;

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

var(--color-1);

変数を定義した後は、その変数を好きなだけ他の USS プロパティで使用することができます。変数を更新すると、それを使用しているすべての 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);

Unity のビルトイン変数

Unityのビルトインスタイルシートは、エディターインターフェースのデフォルト値を設定する USS 変数を定義します。これらの変数を独自のスタイルシートで使用して、カスタムのエディター拡張機能が Unity のスタイルに合わせることができます。詳しくは、Unity のビルトイン変数 を参照してください。

CSS との相違点

変数は、USS でも CSS とほぼ同じように動作します。CSS の変数についての詳しい情報は、MDN ドキュメント を参照してください。

他の関数からの USS 変数の呼び出し

一部のウェブブラウザーでは、以下のプロパティ宣言のように、他の関数の中で var() 関数を使用できます。

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

Unity では var()をこのように使うことはできません。

ルートセレクターで変数の宣言

一般的な CSS では、:root 疑似クラスセレクターでグローバル変数を宣言します。ウェブページのすべての要素は :root を継承しているため、CSS スタイルシートのすべてのセレクターは、ここで宣言された変数を呼び出すことができます。

Unity では、:root での変数の宣言は、ランタイムパネルやエディターウィンドウのルートのビジュアル要素にスタイルシートを添付していれば、エディターウィンドウとランタイムパネルで使用できます。Inspector の UI では使えません。

Inspector では、:root 疑似クラスは、Inspector ウィンドウのルートのビジュアル要素に対してのみ有効です。スタイルシートを添付するサブツリーは、Inspector の階層のずっと下にあります。そのため、:root セレクターは、サブツリーのどの部分にも一致しません。

カスタム Inspector UI の :root のシミュレーション

カスタム Inspector では、:root セレクターの代わりに USS クラスセレクターを使用できます。変数を宣言する USS クラスを作成し、アクセス可能な階層の中の最も高い位置にある要素に適用します。

例えば、以下の USS スニペットでは、以下のクラスを定義します。

• .root は変数を宣言します。
• .label1 は変数を呼び出します。

.root {
    --color1: rgb(25, 255, 75);
}

.label1 {
    color: var(--color1);
}

以下の UXML スニペットは、単純なコンテナ要素を作成し、それにルートクラスを割り当てます。このコンテナには、子要素として Label があり、label1 クラスが割り当てられています。

UXML では以下の通りです。

<UXML xmlns="UnityEngine.UIElements">
    <VisualElement class="root">
        <!-- Including, for example... -->
        <Label class="label1" text="Label text"/>
    </VisualElement>
</UXML>

Label はコンテナを継承しているので、そのスタイルはコンテナのスタイルで定義されているあらゆる変数を呼び出すことができます。