amis-ui 透明度工具类 opacity15 级取值与响应式写法全解析【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amisamis 是使用 JSON 配置即可生成页面的低代码前端框架其内置样式体系 amis-ui 在常规组件样式之外还提供了一套完整的 CSS 工具类utility class。本文聚焦其中用于控制元素透明度的opacity-*工具类基于 packages/amis-ui/scss/helper/effect/_opacity.md 给出的完整类名清单结合 packages/amis-ui/scss/helper/effect/_opacity.scss 的源码实现讲解每一档透明度的取值、如何与组件状态如is-active、:disabled配合、以及如何通过断点前缀在移动端与 PC 端分别控制透明度。读完本文你将能在 amis 页面模板或自定义样式中直接套用这些类名做到与 amis-ui 官方样式规范完全一致。类名清单15 档透明度阶梯与opacity相关的所有工具类集中定义在 packages/amis-ui/scss/helper/effect/_opacity.md 中共 15 档覆盖从完全透明0到完全不透明100的完整取值区间ClassPropertiesopacity-0opacity: 0opacity-5opacity: 0.05opacity-10opacity: 0.1opacity-20opacity: 0.2opacity-25opacity: 0.25opacity-30opacity: 0.3opacity-40opacity: 0.4opacity-50opacity: 0.5opacity-60opacity: 0.6opacity-70opacity: 0.7opacity-75opacity: 0.75opacity-80opacity: 0.8opacity-90opacity: 0.9opacity-95opacity: 0.95opacity-100opacity: 1可以看到这一档位设计不是简单的 5 递增而是在保留 5、10、20、30、40、50、60、70、80、90 的整数步长之外额外提供了 0、25、75、95、100 这几个常用关键点例如opacity-750.75常被用作可读但仍半透明的降级状态opacity-950.95则适合需要轻微透出背景的悬浮层。用户也可以结合transition等属性对opacity的变化做平滑过渡过渡相关工具类可参考 helper 目录 下其它 effect 类如_box-shadow.md。源码解析一次遍历生成全部类名文档中的类名清单并非手工维护而是由 SCSS 代码自动生成。packages/amis-ui/scss/helper/effect/_opacity.scss 定义了名为make-opacity的 mixin其中用一份 Sass Map 将类名后缀 → 透明度值一一对应mixin make-opacity($prefix: ., $suffix: ) { each $name, $value in ( 0: 0, 5: 0.05, 10: 0.1, 20: 0.2, 25: 0.25, 30: 0.3, 40: 0.4, 50: 0.5, 60: 0.6, 70: 0.7, 75: 0.75, 80: 0.8, 90: 0.9, 95: 0.95, 100: 1 ) { #{$prefix}opacity#{suffixName($name)}#{$suffix} { opacity: $value; } } }关键点说明Map 中的 15 个$name与文档表格里的 15 个类名一一对应确保文档即真源suffixName()是定义在 packages/amis-ui/scss/_functions.scss约第 95 行的 Sass 函数当参数为default时返回空字符串否则返回- $str负责把0、5、100等数字后缀拼接到opacity后面形成opacity-0、opacity-5、opacity-100的完整类名mixin 支持传入$prefix与$suffix两个参数为下面的响应式与状态扩展提供了能力。响应式与状态变体从源码注释看到的扩展方式在 packages/amis-ui/scss/helper/effect/_opacity.scss 的末尾除了基础调用include make-opacity();外还针对$devices中定义的设备断点做了循环生成include make-opacity(); each $deivce in map-keys($devices) { include media-device($deivce) { include make-opacity(. selector-escape($deivce :)); } }结合 packages/amis-ui/scss/_variables.scss 中的定义$devices目前包含两个断点$devices: ( m: (max-width: 768px), pc: (min-width: 769px) ) !default;因此编译产物中会额外生成两套以断点为前缀的响应式类名例如在(max-width: 768px)的媒体查询内生效的m:opacity-50以及在(min-width: 769px)下生效的pc:opacity-50。这在移动端与桌面端需要不同透明度的场景下非常有用例如移动端导航栏半透明、PC 端完全透明可以写成div classm:opacity-50 pc:opacity-100…/div另外packages/amis-ui/scss/helper/effect/_opacity.scss 底部保留了一段被注释的状态扩展示例展示了如何把 opacity 工具类推广到伪类与组件状态上// include border-radius(. selector-escape(hover:), :hover); // include border-radius(. selector-escape(active:), .is-active); // include border-radius(. selector-escape(focus:), :focus); // include border-radius(. selector-escape(disabled:), .is-disabled);虽然这段注释引用的是border-radius但其思路对opacity同样成立通过给make-opacity传入不同的$prefix与$suffix即可生成hover:opacity-70、.is-active状态下的opacity-70、:focus下的opacity-70、:disabled下的opacity-70等变体从而实现按钮悬停变淡、禁用态降低透明度等常见交互。需要说明的是当前仓库中该文件仅开启了基础类与断点类生成状态变体以注释形式保留使用前需在自定义样式层自行开启或按相同方式扩展。类名的加载入口helper.scss这些 opacity 工具类并非独立生效而是通过 packages/amis-ui/scss/helper.scss 统一引入import ./helper/effect/box-shadow; import ./helper/effect/opacity;也就是说只要在项目样式入口引入了helper.scss它同时导入了 background、border、flex、grid、spacing、sizing、typography 等全部工具类参见同文件其余import语句opacity-*系列即可直接使用。这也意味着在 amis 的 JSON 配置中若某个组件或容器支持className属性即可直接把opacity-*类名写进其中在自定义皮肤或custom组件场景中也可以直接在 HTML 模板里使用这些类名效果与 amis 内置样式体系完全一致。典型使用场景表单禁用态为表单控件添加opacity-60之类的类名配合:disabled状态可弱化禁用控件的外观页面占位 / 水印使用opacity-5、opacity-10等低透明度类名制作背景水印或占位文案不干扰主内容阅读图片或图标的明暗切换opacity-100与opacity-0配合 JS 切换类名可实现显隐过渡响应式视觉降级利用m:opacity-*与pc:opacity-*让同一元素在不同设备上呈现不同透明度叠加层opacity-95或opacity-90适合需要轻微透出下层内容的弹层背景。总结amis-ui 的opacity-*工具类提供了一条从 0 到 1 共 15 档、覆盖常用关键点的透明度阶梯其类名由 make-opacity mixin 从 Sass Map 中自动生成并通过$devices断点循环额外产出m:与pc:前缀的响应式变体。实际使用时只需保证项目引入了 helper.scss即可在 amis 组件className或自定义模板中直接引用文档列出的全部类名如需悬停、激活、禁用等状态变体可参考源码中注释示例按相同模式扩展。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
