创建 USS 变量

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

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

创建和分配 USS 变量

您可以在 UI Builder 中或直接在 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;
  }

指定 USS 变量的默认值

这var()函数接受可选的默认值。当 UI 系统无法解析变量时，它会使用默认值。例如，如果您从样式表中删除变量但忘记删除对它的引用，则 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内置变量参考