amis-ui 透明度工具类 opacity：15 级取值与响应式写法全解析

amis-ui 透明度工具类 opacity：15 级取值与响应式写法全解析

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis

amis 是使用 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）的完整取值区间：

可以看到，这一档位设计不是简单的 5 递增，而是在保留 5、10、20、30、40、50、60、70、80、90 的整数步长之外，额外提供了 0、25、75、95、100 这几个常用关键点，例如opacity-75（0.75）常被用作"可读但仍半透明"的降级状态，opacity-95（0.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 class="m: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