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’s built-in style sheets define USS variables that set default values for the Editor interface. You can use these variables in your own style sheets to ensure that your custom Editor extensions match Unity style. For details, see [Built-in Unity variables](UIE-USS-UnityVariables.

与 CSS 的区别

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

有一些细微的差异需要理解。

从其他函数调用 USS 变量

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

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

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

在根选择器中声明变量

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

In Unity, declaring variables in :root works for Editor windows and runtime panels, provided you attach the stylesheet to the root Visual Element of the panel or Editor window. It does not work for 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 继承自容器，它的样式可以调用容器样式中定义的任何变量。