amis-ui 背景色工具类全解bg-* 系列 class 的取值、状态/响应式变体与源码实现【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis背景色background-color工具类是 amis 前端低代码框架中 amis-ui 样式体系的一部分它仿照 Tailwind CSS 的原子化思路为开发者提供了一批开箱即用的bg-*工具类无需编写任何自定义 CSS 即可为任意 DOM 节点、amis 组件节点或 Schema 中的className字段设置背景色。本文将完整梳理bg-*系列的全部类名与取值深入讲解 hover、active、focus、disabled、group-hover 状态变体和m:/pc:响应式前缀的用法并结合 _background-color.scss 与 _variables.scss 的源码剖析其生成原理帮助你彻底掌握这套颜色体系并在项目中高效运用。一、背景色工具类是什么在 amis 中几乎所有组件都支持通过className属性附加额外的 CSS 类。amis-ui 的样式库在 helper.scss 中统一引入了背景色、边框、布局、间距、排版等十余组工具类模块其中背景色模块由 _background-color.md文档与 _background-color.scss实现组成。背景色工具类的设计完全对标 Tailwind CSS 的背景色体系核心价值有三点零样式代码给组件加一个classNamebg-primary即可完成上色无需在 CSS 文件中新增任何规则全色阶覆盖从 50 到 900 共 9 级色阶外加transparent、current两个特殊值能覆盖绝大多数视觉需求状态与响应式齐备hover:、active:、focus:、disabled:、group-hover:前缀以及m:、pc:设备前缀一应俱全与组件交互态和移动端适配天然配套。下面先看它在 amis 组件中的真实应用再逐表对照全部取值。二、在 amis 中的实际使用示例在 amis 源码中背景色工具类已被内置组件直接使用。以 Progress.tsx进度条组件为例其阈值颜色映射就声明为map: [bg-danger, bg-warning, bg-info, bg-success, bg-success]这意味着进度条会根据进度高低自动套用bg-danger危险红、bg-warning警告黄、bg-info信息蓝、bg-success成功绿等背景色类。另一个例子是 App.tsx其中导航徽标的默认类名为link.badgeClassName || bg-info即直接以bg-info作为徽标默认背景。从这两个用例可以直观看到bg-*类既可以写死在组件渲染逻辑里也可以由使用方通过className/badgeClassName等属性传入覆盖使用方式与普通 CSS 类完全一致。你在自己的 amis Schema 中也可以这样写{ type: button, label: 危险操作, className: bg-danger text-white }三、基础与语义色背景类原文档首先给出了一批基础类包含三个特殊值bg-none、bg-transparent、bg-current、黑白两色以及八组语义色。其中bg-none是唯一带!important的类用于强制清除所有背景包括背景图片bg-transparent将背景设为完全透明bg-current使用 CSS 关键字currentColor即背景色跟随当前元素的color值是实现文字与背景同色联动的利器。ClassPropertiesbg-nonebackground: none !importantbg-transparentbackground: transparentbg-currentbackground: currentColorbg-blackbackground: #000bg-whitebackground: #fffbg-primarybackground: #007bffbg-secondarybackground: #6c757dbg-successbackground: #28a745bg-infobackground: #007bffbg-warningbackground: #fad733bg-dangerbackground: #dc3545bg-lightbackground: #f8f9fabg-darkbackground: #343a40注意原文档表格中bg-warning一列写的是#28a745与 _variables.scss 中warning: #fad733不一致属于文档快照与源码变量的偏差实际生效值以 SCSS 变量为准上表已按源码修正为#fad733。这也是本章后面要强调的原则一切以$colors变量为最终事实来源。语义色对应着 amis 的主题色体系primary为主色、danger为危险操作色、success为成功反馈色、info为信息提示色、warning为警告色、light/dark为明暗中性色。在表单校验、状态标签、进度条等场景中优先使用语义色可以在主题切换时自动跟随主题变量避免硬编码颜色值导致的主题漂移。四、灰色与彩色色阶背景类除基础色外amis-ui 还提供了 gray、red、yellow、green、blue、cyan、indigo、purple、pink 九大色系每个色系包含transparent、current两个特殊类以及 50900 共 9 级明度色阶。数值越大颜色越深50 为最浅、900 为最深整体遵循 Tailwind 色板约定源码注释也给出了 tailwind.ink 等色板生成工具作为参考见 _variables.scss。4.1 灰色色阶ClassPropertiesClassPropertiesbg-gray-transparentbackground: transparentbg-gray-500background: #6b7280bg-gray-currentbackground: currentColorbg-gray-600background: #4b5563bg-gray-50background: #f9fafbbg-gray-700background: #374151bg-gray-100background: #f3f4f6bg-gray-800background: #1f2937bg-gray-200background: #e5e7ebbg-gray-900background: #111827bg-gray-300background: #d1d5dbbg-gray-400background: #9ca3af4.2 红色色阶ClassPropertiesClassPropertiesbg-red-transparentbackground: transparentbg-red-500background: #ef4444bg-red-currentbackground: currentColorbg-red-600background: #dc2626bg-red-50background: #fef2f2bg-red-700background: #b91c1cbg-red-100background: #fee2e2bg-red-800background: #991b1bbg-red-200background: #fecacabg-red-900background: #7f1d1dbg-red-300background: #fca5a5bg-red-400background: #f871714.3 黄色色阶ClassPropertiesClassPropertiesbg-yellow-transparentbackground: transparentbg-yellow-500background: #f59e0bbg-yellow-currentbackground: currentColorbg-yellow-600background: #d97706bg-yellow-50background: #fffbebbg-yellow-700background: #b45309bg-yellow-100background: #fef3c7bg-yellow-800background: #92400ebg-yellow-200background: #fde68abg-yellow-900background: #78350fbg-yellow-300background: #fcd34dbg-yellow-400background: #fbbf244.4 绿色色阶ClassPropertiesClassPropertiesbg-green-transparentbackground: transparentbg-green-500background: #10b981bg-green-currentbackground: currentColorbg-green-600background: #059669bg-green-50background: #ecfdf5bg-green-700background: #047857bg-green-100background: #d1fae5bg-green-800background: #065f46bg-green-200background: #a7f3d0bg-green-900background: #064e3bbg-green-300background: #6ee7b7bg-green-400background: #34d3994.5 蓝色色阶ClassPropertiesClassPropertiesbg-blue-transparentbackground: transparentbg-blue-500background: #3b82f6bg-blue-currentbackground: currentColorbg-blue-600background: #2563ebbg-blue-50background: #eff6ffbg-blue-700background: #1d4ed8bg-blue-100background: #dbeafebg-blue-800background: #1e40afbg-blue-200background: #bfdbfebg-blue-900background: #1e3a8abg-blue-300background: #93c5fdbg-blue-400background: #60a5fa4.6 青色色阶ClassPropertiesClassPropertiesbg-cyan-transparentbackground: transparentbg-cyan-500background: #06b6d4bg-cyan-currentbackground: currentColorbg-cyan-600background: #0891b2bg-cyan-50background: #ecfeffbg-cyan-700background: #0e7490bg-cyan-100background: #cffafebg-cyan-800background: #155e75bg-cyan-200background: #a5f3fcbg-cyan-900background: #164e63bg-cyan-300background: #67e8f9bg-cyan-400background: #22d3ee4.7 靛蓝色阶ClassPropertiesClassPropertiesbg-indigo-transparentbackground: transparentbg-indigo-500background: #6366f1bg-indigo-currentbackground: currentColorbg-indigo-600background: #4f46e5bg-indigo-50background: #eef2ffbg-indigo-700background: #4338cabg-indigo-100background: #e0e7ffbg-indigo-800background: #3730a3bg-indigo-200background: #c7d2febg-indigo-900background: #312e81bg-indigo-300background: #a5b4fcbg-indigo-400background: #818cf84.8 紫色色阶ClassPropertiesClassPropertiesbg-purple-transparentbackground: transparentbg-purple-500background: #8b5cf6bg-purple-currentbackground: currentColorbg-purple-600background: #7c3aedbg-purple-50background: #f5f3ffbg-purple-700background: #6d28d9bg-purple-100background: #ede9febg-purple-800background: #5b21b6bg-purple-200background: #ddd6febg-purple-900background: #4c1d95bg-purple-300background: #c4b5fdbg-purple-400background: #a78bfa4.9 粉色色阶ClassPropertiesClassPropertiesbg-pink-transparentbackground: transparentbg-pink-500background: #ec4899bg-pink-currentbackground: currentColorbg-pink-600background: #db2777bg-pink-50background: #fdf2f8bg-pink-700background: #be185dbg-pink-100background: #fce7f3bg-pink-800background: #9d174dbg-pink-200background: #fbcfe8bg-pink-900background: #831843bg-pink-300background: #f9a8d4bg-pink-400background: #f472b6五、状态变体hover / active / focus / disabled / group-hover原文档明确指出还有 hover、active、focus、disabled 扩展比如hover:bg-black。这些变体的写法是在类名前加状态前缀形如button classbg-blue-500 hover:bg-blue-700悬停变深/button完整的变体清单如下均可与第三节、第四节的任意bg-*类组合变体写法作用底层选择器hover:bg-*鼠标悬停时切换背景色.hover\:bg-xxx:hoveractive:bg-*按下激活时切换背景色.active\:bg-xxx.is-active、.active\:bg-xxx:activefocus:bg-*获得焦点时切换背景色.focus\:bg-xxx:focusdisabled:bg-*禁用状态时切换背景色.disabled\:bg-xxx.is-disabled、.disabled\:bg-xxx:disabledgroup-hover:bg-*父元素带group类悬停时切换当前元素背景色.group:hover .group-hover\:bg-xxx其中active与disabled两个变体同时支持 CSS 伪类:active/:disabled和 amis 常用的.is-active/.is-disabled状态类这是因为 amis 很多组件如按钮的按下态并不触发原生:active而是通过框架添加.is-active类来标记状态。group-hover则解决了悬停父容器、高亮子元素的常见交互需求父节点需先加上group类div classgroup div classbg-white group-hover:bg-gray-100悬停父容器时变色/div /div六、响应式变体m: 与 pc: 前缀背景色类还支持设备前缀在 _variables.scss 中定义了设备断点映射$devices: ( m: (max-width: 768px), pc: (min-width: 769px) ) !default;m:前缀屏幕宽度 ≤ 768px移动端时生效pc:前缀屏幕宽度 ≥ 769px桌面端时生效。用法示例div classbg-white pc:bg-gray-50桌面端显示浅灰背景移动端为白色/div div classbg-blue-500 m:bg-green-500移动端背景为绿色/div从源码看设备变体与状态变体还可以自由叠加例如m:hover:bg-blue-700、pc:focus:bg-blue-500等组合都会被生成见 _background-color.scss。其实现依赖 _mixins.scss 中的media-devicemixin最终会编译为对应的media查询块。七、源码实现原理从 $colors 变量到全套类名背景色工具类的全部类名并非手写而是由 SCSS 程序化生成的。整个生成链路分为三层7.1 颜色变量源$colorsmap所有颜色值集中在 _variables.scss 的$colorsmap 中$colors: ( black: #000, white: #fff, primary: #007bff, secondary: #6c757d, success: #28a745, info: #007bff, warning: #fad733, danger: #dc3545, light: #f8f9fa, dark: #343a40, gray: (50: #f9fafb, ..., 900: #111827), red: (50: #fef2f2, ..., 900: #7f1d1d), yellow: (50: #fffbeb, ..., 900: #78350f), green: (50: #ecfdf5, ..., 900: #064e3b), blue: (50: #eff6ff, ..., 900: #1e3a8a), cyan: (50: #ecfeff, ..., 900: #164e63), indigo: (50: #eef2ff, ..., 900: #312e81), purple: (50: #f5f3ff, ..., 900: #4c1d95), pink: (50: #fdf2f8, ..., 900: #831843) ) !default;注意$colors使用了!default声明意味着在引入样式前你可以自行覆盖该变量从而整体替换这套配色这是 amis-ui 支持主题定制的关键机制之一。顶层键如primary、red作为类名中段嵌套 map如red: (50: ..., 900: ...)则递归展开为bg-red-50bg-red-900。7.2 递归生成 mixinbg-colors-map与bg-colors_background-color.scss 中定义了两个核心 mixinbg-colors-map遍历$colorsmap 生成.bg-{色名}规则遇到嵌套 map 时递归调用自身把父键拼进类名这正是色阶类名的由来同时特判了is-active与is-disabled两种后缀以生成双选择器规则。bg-colors在调用 map 生成之前先固定输出bg-transparent与bg-none后者带!important。7.3 全局展开状态变体与设备变体文件末尾对 mixin 进行了多轮调用第 182213 行include bg-colors(); include bg-colors(. selector-escape(hover:), :hover); include bg-colors(. selector-escape(active:), .is-active); include bg-colors(. selector-escape(focus:), :focus); include bg-colors(. selector-escape(disabled:), .is-disabled); include bg-colors(.group:hover . selector-escape(group-hover:)); each $deivce in map-keys($devices) { include media-device($deivce) { include bg-colors(. selector-escape($deivce :)); // 以及 $deivce :hover / :active / :focus / :disabled / group-hover 的叠加组合 } }这里有两个值得注意的工程细节由于类名中包含冒号如hover:bg-black源码使用 Sass 的selector-escape函数对冒号进行转义确保生成的 CSS 选择器.hover\:bg-black:hover能被浏览器正确解析状态变体和设备变体都通过前缀 后缀两个参数注入 mixin因此可以任意组合例如m:hover:bg-primary会在移动端媒体查询内生成.m\:hover\:bg-primary:hover规则。最终这一整套规则经 helper.scss 的import ./helper/background/background-color被纳入 amis-ui 全局样式。八、同族工具类与最佳实践背景色工具类是 amis-ui 原子化工具类体系中的一员与其同族、可搭配使用的还有文字颜色text-*系列与bg-*共用同一套$colors色板边框颜色border-*系列同样基于$colors生成宽度/高度 与 padding 等布局工具类常用于组合出可预览的色块原文档示例中的w-24 h-6即宽度与高度工具类。实际开发中的推荐实践优先使用语义色bg-primary、bg-danger、bg-success等表达业务含义避免散落的魔数色值深浅色阶用于层次用bg-gray-50bg-gray-200做卡片、表头等浅色底用bg-gray-800bg-gray-900做深色区块状态色组合交互按钮类元素用hover:、active:、disabled:变体实现完整的交互态配色移动端优先默认值面向移动端书写再用pc:前缀覆盖桌面端表现主题一致性若需全局换肤优先覆盖$colors变量而不是逐个替换类名。九、注意事项与已知细节文档快照与源码的偏差_background-color.md 中bg-warning标注为#28a745而实际$colors中warning为#fad733bg-info与bg-primary同为#007bff。遇到类似疑问时一律以 _variables.scss 的$colorsmap 为最终事实来源。!important语义全系列中只有bg-none使用background: none !important用于强制清除既有背景例如覆盖组件默认背景图片或背景色其余类均未加!important因此叠加类时后声明的规则会按 CSS 层叠规则生效。冒号类名写法使用状态/设备变体时类名中包含冒号在 HTML 中直接写classhover:bg-black即可若在 JSX 或 JSON Schema 中书写注意字符串原样保留冒号不要转义。background与background-color的差异基础特殊类bg-transparent、bg-current、bg-none使用简写属性background其余色阶类使用background-color两者在层叠时行为略有不同简写会重置背景图片等子属性如需同时使用背景图与背景色应避免在同一个元素上叠加这两类特殊值与背景图场景。十、总结本文完整覆盖了 amis-uibg-*背景色工具类的全部类名、取值、状态变体、响应式前缀及其 SCSS 生成原理。从使用层面你可以直接在组件className中组合使用基础色、语义色与九大色阶配合hover:/active:/focus:/disabled:/group-hover:与m:/pc:前缀实现完整的交互与响应式配色从原理层面所有类名均由$colorsmap 经bg-colors-map/bg-colorsmixin 递归生成修改 _variables.scss 即可整体定制配色。掌握这套体系后在 amis 低代码页面中做任何背景色定制都不再需要编写额外的 CSS 文件。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考