USS 自定义属性（变量）

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

要创建 USS 变量，请在其名称前加上双连字符（--）。

--color-1: red;

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

var(--color-1);

定义变量后，您可以根据需要在任意数量的其他 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 继承自容器，它的样式可以调用容器样式中定义的任何变量。