【Unity】【UI Toolkit】USSで変数を使う方法まとめ

UnityのUI ToolkitのUSSで変数を使う方法についてまとめました。

はじめに
変数の定義
変数の使用
動作確認
参考

はじめに

USSでは複数の箇所で共通して使う値を変数として取り扱うことができます。

本記事ではこれを扱う方法についてまとめます。

変数の定義

まず変数を定義するには、USSのプロパティとして以下のように記述します。

--color-1: red;

注意点としては以下の2点です。

ハイフン2個で始める
これが適用されるのはこの要素配下のみ

特に2点目の制約があるため、以下のように:rootセレクタを使ってルート要素のプロパティとして定義するのが一般的なようです。

:root {
    --color-1: red;
}

変数の使用

変数を使用するには以下のようにvar 関数を使います。

Button {
    background-color: var(--color-1);
}

また、varの第二引数としてデフォルト値を指定することもできます。
これを指定すると、第一引数の変数が見つからなかった時にこのデフォルト値が適用されます。

background-color: var(--color-1, green);

動作確認

変数の動作確認のために以下のUSSファイルを作成します。

:root {
    --color-1: red;
}

Button {
    background-color: var(--color-1);
}

次にEditorWindowにこのスタイルシートを適用するための適当なレイアウトを組みます。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class ExampleWindow : EditorWindow
{
    [SerializeField] private StyleSheet _styleSheet;

    private void OnEnable()
    {
        rootVisualElement.styleSheets.Add(_styleSheet);

        var child = new Button();
        child.text = "Example Button";
        rootVisualElement.Add(child);
    }

    [MenuItem("Window/Example")]
    private static void Open()
    {
        GetWindow<ExampleWindow>();
    }
}