Version: 2021.3
USS transition
内置 Unity 变量

USS 自定义属性(变量)

USS 变量,也称为自定义属性,定义了可以在其他 USS 规则中重用的值。您可以为任何类型的 USS 属性创建变量。

要创建 USS 变量,请在其名称前加上双连字符(--)。

--color-1: red;

要在另一个 USS 规则中使用 USS 变量值,请使用 var() 函数来调用它。

var(--color-1);
注意:
var() 函数还接受一个可选的默认值(请参阅下方的指定默认值)。

定义变量后,您可以根据需要在任意数量的其他 USS 属性中使用该变量。当您更新该变量时,所有使用它的 USS 属性也会更新。

例如,以下 USS 代码片段定义了一个声明两个颜色变量的样式规则,以及两个使用这些变量的样式规则。

: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;
  }

要更新颜色方案,您只需更改两个变量值而不是四个颜色值。

使用变量可以更轻松地管理复杂 UI 的样式,其中多个规则(有时在不同的样式表中)使用相同的值。

指定默认值

var() 函数接受一个可选的默认值。UI 系统在无法解析变量时使用默认值。例如,如果您从样式表中删除一个变量,但忘记删除对它的引用。

要为变量指定默认值,请将其添加在变量值之后,并以逗号 , 分隔。以下 USS 代码片段调用了 --color-1 变量,但如果 UI 系统无法解析它,它会使用红色的十六进制值 (#FF0000)。

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

内置 Unity 变量

Unity 内置样式表定义了为编辑器界面设置默认值的 USS 变量。您可以在自己的样式表中使用这些变量,确保自定义编辑器扩展与 Unity 样式相匹配。有关详细信息,请参阅内置 Unity 变量

与 CSS 的区别

变量在 USS 中的工作方式与在 CSS 中的工作方式几乎完全相同。有关 CSS 变量的详细信息,请参阅 MDN 文档

从其他函数调用 USS 变量

某些 Web 浏览器支持使用其他函数内部的 var() 函数,如下面的属性声明:

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

Unity 不支持 var() 的这种用法。

在根选择器中声明变量

CSS 常见做法是在 :root 伪类选择器中声明 “global” 变量。因为网页中的每个元素都继承自 :root,所以 CSS 样式表中的每个选择器都可以调用其中声明的变量。

在 Unity 中,在 :root 中声明变量适用于编辑器窗口和运行时面板,前提是您将样式表附加到面板或编辑器窗口的根视觉元素。它不适用于 Inspector UI。

在 Inspector 中,:root 伪类仅在 Inspector 窗口的根 VisualElement 上处于活动状态。您附加样式表的子树在 Inspector 层级结构中要低得多。因此,:root 选择器永远不会匹配子树的任何部分。

模拟 :root 用于自定义 Inspector UI

您可以使用 USS 类选择器代替自定义 Inspector 中的 :root 选择器。创建一个 USS 类,以在其中声明您的变量,并将其应用于您有权访问的层级结构中的最高元素。

例如,以下 USS 代码片段定义了以下类:

  • .root 声明了一个变量。
  • .label1 调用该变量。
.root {
    --color1: rgb(25, 255, 75);
}

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

以下 UXML 代码片段创建一个简单的容器元素并为其分配根类。容器有一个子元素,一个标签,为其分配的类是 label1

在 UXML 中:

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

因为 Label 继承自容器,它的样式可以调用容器样式中定义的任何变量。

USS transition
内置 Unity 变量