Version: 2020.2
内置 Unity 变量
事件系统

USS 编写样式表

为了使各项井井有条,UI 工具包已采用 BEM 作为元素的样式设置方法。虽然并非必须使用 BEM,但是建议采用。

关于 BEM

BEM 表示块元素修饰符。BEM 是一个简单的系统,有助于编写结构化、明确、易于维护的选择器。通过 BEM 可以向元素分配类,然后将这些类用作样式表中的选择器。

BEM 类最多包含三个组件:

  • 块名称:块是有意义的独立实体或控件。例如,menubuttonlist-view
  • 元素名称:块的一部分,没有独立含义,并且在语义上与其块相关。元素名称用两个下划线追加到块名称之后。例如,menu__itembutton__iconlist-view__item
  • 修饰符:一个可更改块或元素外观或行为的标记。修饰符用两个短划线追加到块或元素名称之后。例如,menu--disabledmenu__item--disabledbutton--smalllist-view__item--selected

每个名称部分可能由拉丁字母、数字和短划线组成。每个名称部分用双下划线 __ 或双短划线 -- 连接起来。

以下示例显示了菜单的 XML 代码:

<VisualElement class="menu">
    <Label class="menu__item" text="Banana" />
    <Label class="menu__item" text="Apple" />
    <Label class="menu__item menu__item--disabled" text="Orange" />
</VisualElement>

选择器

由于每个元素都配有描述其作用和外观的类,因此您可以仅使用一个类名来编写大多数选择器:

.menu {
}

.menu__item {
}

.menu__item--disabled {
}

应该能够使用单个类名来设置元素的样式。但是在某些情况下,可能需要使用复杂的选择器。例如,元素的样式取决于其块的修饰符时,可以使用复杂的选择器:

.button {
}

.button__icon {
}

.button--small {
}

.button--small .button__icon {
}

注意不要指定长选择器。长选择器可能表示 UI 的图形设计不一致。还应该避免在 BEM 选择器中使用类型名称(ButtonLabel)或元素名称 (#my-button)。

使 VisualElement 支持 BEM

UI 工具包遵循 BEM。每个视觉元素都附有必要的类名。例如,所有 TextElement 具有 unity-text-element 类。从 TextElement 派生的 Button 的每个实例在类列表中都填充有 unity-buttonunity-text-element 类。

如果从 VisualElement 或其某个后代派生新元素,请遵循以下准则以确保元素易于使用 BEM 方法进行样式设置:

  • 使用构造函数中的 AddToClassList(),将相关 USS 类添加到元素实例。
  • 如果新元素在其构造函数中实例化子元素,请将相关类分配给子元素。例如,my-block__first-childmy-block__other-child
  • 如果您的元素支持多种状态或变体(例如不同大小),请在元素状态变化或选择元素变体时添加和删除相关类。
  • 如果要在其他项目中使用您的元素,请考虑给类添加前缀以避免与现有用户类名称冲突。
内置 Unity 变量
事件系统