用途:Bootstrap 6 中每个工具类都由 Sass 映射 $utilities 生成。每项描述一类工具类:设置的属性、可用取值、生成的变体。自定义通过编辑该映射完成,而非写 CSS。
主要能力:可从任意起点新增自定义工具类;修改、重命名或移除默认工具类;生成响应式(.md:)、状态(hover focus)、打印(print:)和暗色(dark:)变体;用自定义属性与高级选择器组合取值;裁剪生成的 CSS 体积;为 Bootstrap 框架本身新增工具类。
关键机制:scss/utilities/_api.scss 是完整管线,含 generate-utility-at-properties 与 @layer utilities 内的 generate-utilities-loop。工具类处于最后层叠层,无需 !important 即可覆盖组件样式(仅显式 important: true 的分组才加)。@property 注册在层外,工具类赋值的每个自定义属性以 syntax: "*"、inherits: false 注册。$utilities 配置在 config 模块,需先 @use "bootstrap/scss/config" with 再 @use "bootstrap/scss/bootstrap"。映射合并是浅合并,替换已有分组键会整体替换,需复制完整定义再改。
字段:property(必需)、values(必需)、class、selector、child-selector、variables、state、responsive、print、dark、important、enabled。
用法要点:新增仅传差异项;values 用列表则后缀即值,用映射则键为后缀,null 键省略后缀;扩展已有族可注册复用同类名的新分组;不需要组件时可用 bootstrap-utilities 入口;未用分组设为 null 或 enabled: false;只在单一断点使用的分组关闭 responsive。
验证:运行 npm run css-lint 与 npm run css,在编译 CSS 中搜索期望类名(含转义变体),确认移除项不再存在,检查新自定义属性是否出现在顶部 @property 块,留意 Sass 关于未知键的 @warn。为框架贡献时改 scss/_utilities.scss、补文档与 scss/tests/utilities/_api.test.scss 覆盖并提交 bootstrap-utilities.metadata.json。
限制:配置 config 的文件无法读取 Bootstrap 的 Sass 成员($spacers 等),需改写为 CSS 标记或字面量。变体会倍增生成的 CSS,应逐分组开启。其他限制暂未提供。