创建 USS 变量

您可以创建一个 USS 变量并在其他 USS 属性中使用它。当您更新 USS 变量时，所有使用该变量的 USS 属性都会更新。您还可以为 USS 变量指定默认值。

创建和使用 USS 变量

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

--color-1: red;

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

var(--color-1);

当您更新变量时，它会更新所有使用它的 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(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。更多信息
参见词汇表的样式变得更容易，其中多个规则（有时在不同的样式表中）使用相同的值。

为 USS 变量指定默认值

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

要为变量指定默认值，请将其添加到变量值之后，用逗号 , 分隔。

以下 USS 代码片段调用 --color-1 变量。如果 UI 系统无法解析该变量，则它将使用红色的十六进制值 (#FF0000)。

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

与 CSS 变量的差异

变量在 USS 中的工作方式与在 CSS 中的工作方式基本相同。有关 CSS 变量的详细信息，请参阅 MDN 文档。但是，USS 不支持 CSS 的某些功能。

USS 不支持在其他函数内部使用 var() 函数，如下所示

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

USS 不支持对变量进行数学运算。

其他资源

USS 自定义属性（变量）

USS 内置变量简介