企业官网建设流程全解析

amis 文本装饰工具类详解：underline、line-through 与 no-underline 的用法与源码实现

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

导读

在 amis 低代码框架中，除了通过 JSON 配置渲染组件外，还内置了一套完整的 CSS 工具类（Helper Class）体系，用于快速调整文本的装饰样式。本文聚焦于 amis-ui 包中 文本装饰工具类文档，系统讲解underline（下划线）、line-through（删除线）、no-underline（去除下划线）三个核心类的用法、响应式变体、与链接样式的联动关系，并结合 底层 SCSS 实现 分析其编译原理。读完本文，你可以在 amis 页面与自定义样式中熟练使用这些工具类，也能理解它们与其他文本工具类的配合方式。

一、核心类一览

文本装饰工具类文档 给出了最直接的类名到 CSS 属性的映射关系，原文表格如下：

• underline：为文本添加下划线，常用于强调链接、标题或需要视觉引导的提示文字；
• line-through：为文本添加删除线，常用于展示价格划线、已完成任务的标记等场景；
• no-underline：显式移除文本的下划线，常用于清除超链接默认样式、或覆盖组件内嵌的下划线样式。

这三个类都只作用于text-decoration这一个 CSS 属性，互斥且语义明确，使用时直接以类名形式挂在任意 HTML 元素或 amis 支持className配置的组件上即可。

二、源码实现解析

2.1 工具类的主体生成逻辑

与纯手写的 CSS 不同，amis-ui 的文本装饰工具类由 SCSS 混入（Mixin）动态生成。查看 _text-decoration.scss 的源码：

@mixin make-text-decoration($prefix: '.') { #{$prefix}underline { text-decoration: underline; } #{$prefix}line-through { text-decoration: line-through; } #{$prefix}no-underline { text-decoration: none; } } @include make-text-decoration(); @each $deivce in map-keys($devices) { @include media-device($deivce) { @include make-text-decoration('.' + selector-escape($deivce + ':')); } } // hover ?

可以看到：

1. make-text-decoration混入接收一个可选的类名前缀参数，默认前缀为.，即生成.underline、.line-through、.no-underline三个基础类；
2. 混入先以默认前缀调用一次，生成全局可用的基础类；
3. 随后遍历$devices设备断点映射，在对应媒体查询内部以.<设备名>:作为前缀再次调用混入，生成响应式变体；
4. 文件末尾的// hover ?注释表明：目前该工具类体系暂未内置 hover 态变体，如需 hover 效果请自行扩展或借助 CSS 变量实现。

2.2 文档与样式同源：markdown 注释块

值得注意的一个工程细节是：_text-decoration.scss 的文件头部有一段/*!markdown ... */注释块，其内容与独立的 _text-decoration.md 文档完全一致。这意味着该类工具文档可以通过构建脚本从 SCSS 源文件中提取，保证"文档即代码、代码即文档"，避免样式实现与说明文档发生漂移。

2.3 响应式变体的实现原理

响应式变体依赖 _variables.scss 中定义的$devices映射：

$devices: ( m: '(max-width: 768px)', pc: '(min-width: 769px)' ) !default;

再配合 _mixins.scss 中的media-device混入：

@mixin media-device($name, $devices: $devices) { $n: map-get($devices, $name); @media #{$n} { @content; } }

因此 SCSS 编译后会生成两类额外变体：

• .m:underline、.m:line-through、.m:no-underline：仅在屏幕宽度 ≤ 768px（移动端）时生效；
• .pc:underline、.pc:line-through、.pc:no-underline：仅在屏幕宽度 ≥ 769px（桌面端）时生效。

通过selector-escape对类名中的冒号做了转义处理，确保选择器在 CSS 中合法可用。这种"设备前缀 + 冒号"的命名风格与 amis-ui helper 体系下其余工具类（如 flex、spacing、sizing 等，参见 helper 目录）完全一致，例如 文本对齐工具类 也采用相同的@each ... map-keys($devices)生成策略，便于整体记忆与迁移使用。

三、在 amis 页面中的使用方式

3.1 直接用于组件 className

由于工具类最终编译为普通 CSS 类，它们可以出现在任意 amis 组件支持className、labelClassName、valueClassName等样式的属性中。例如在 JSON 配置里给一个文本容器添加删除线：

{ "type": "tpl", "tpl": "原价 ${price} 元", "className": "line-through" }

给链接类内容去除下划线：

{ "type": "tpl", "tpl": "<a href=\"https://example.com\">访问文档</a>", "className": "no-underline" }

在移动端与桌面端差异化展示时，使用带设备前缀的变体：

{ "type": "static", "name": "notice", "label": "公告", "valueClassName": "pc:underline m:no-underline" }

上述配置表示：桌面端显示下划线强调，移动端则移除下划线，由 _variables.scss 中定义的断点（768px）自动切换。

3.2 在自定义样式中复用

如果你在项目中通过 自定义样式 或自定义 CSS 引入 amis-ui 的 SCSS 变量与混入，也可以直接调用make-text-decoration混入，按自己的类名前缀生成一组文本装饰类：

@import 'packages/amis-ui/scss/helper/typography/text-decoration'; // 生成 .my-underline / .my-line-through / .my-no-underline @include make-text-decoration('.my-');

需要注意的是，_text-decoration.scss内部在定义混入的同时已经执行了两次@include（基础类与响应式变体），因此它属于"声明即生效"的样式模块，通常不建议重复引入，直接引用编译产物或通过 helper.scss 整体引入即可。

四、与链接样式及旧版工具类的关联

4.1 链接装饰由 CSS 变量驱动

在 amis-ui 中，链接（Link）等组件的下划线并非写死，而是通过 CSS 自定义属性控制的。查看 _components.scss 中的定义：

--link-onClick-text-decoration: none; --link-onHover-text-decoration: none; --link-text-decoration: none; --link-disabled-text-decoration: none; --link-decoration: var(--link-text-decoration); // 原变量 --link-onHover-decoration: var(--link-onClick-text-decoration);

这些变量被 链接组件样式、表格样式 等模块消费。因此，no-underline类常被用来在业务侧覆盖组件默认或主题设定的链接装饰效果；而underline类则用于在没有链接语义的文本上手动模拟下划线强调。这种"工具类 + CSS 变量"双轨设计，使文本装饰既可以细粒度控制，又能在主题层面统一配置。

4.2 旧版文本工具类

在 _utilities.scss 中还保留了旧版缩写类：

.text-l-t { text-decoration: line-through; } .text-u-l { text-decoration: underline; }

即.text-u-l（underline）与.text-l-t（line-through）是underline、line-through的等价历史别名。如果你在存量页面中见过这类类名，可以放心它们与新版工具类效果一致；新代码建议优先使用 _text-decoration.md 文档中的三类标准命名，以获得响应式变体支持。

五、与相邻排版工具类组合使用

text-decoration常常需要与文本排版相关的其他工具类组合使用，以达到完整的效果。在 typography 目录 下，amis-ui 提供了成体系的排版工具类，例如：

• 文本颜色：控制文字颜色；
• 文本对齐：控制水平对齐；
• 文本截断：配合white-space、overflow实现省略号；
• 字体样式：控制斜体等；
• 字体粗细：控制字重。

例如实现一个"红色删除线的失效价格 + 绿色当前价格"的典型促销场景：

{ "type": "flex", "justify": "start", "items": [ { "type": "tpl", "tpl": "￥199", "className": "line-through text-danger" }, { "type": "tpl", "tpl": "￥99", "className": "text-success" } ] }

六、常见问题与注意事项

1. 类名与 HTML 内联样式的关系：工具类仅设置text-decoration单个属性，若元素上同时存在内联样式或其他选择器设置同名属性，最终优先级由 CSS 层叠规则决定，建议避免在同一元素上混用多种设置方式。
2. 链接元素默认样式：浏览器会给<a>元素默认下划线，no-underline是移除该默认样式最直接的手段；而 amis 组件内的链接样式则受上文 CSS 变量控制，如需全局调整可在主题变量层面修改。
3. 响应式变体仅在匹配断点生效：.m:*与.pc:*变体各自包裹在媒体查询中，使用时需确认目标视口宽度。断点阈值在 _variables.scss 中定义为 768px，可随主题定制覆盖。
4. 编译产物引入方式：文本装饰工具类随 helper.scss 整体打包，无需单独引入；如果你在自定义 SCSS 中复用make-text-decoration混入，注意避免与全局已生成的类名冲突。

七、总结

underline、line-through、no-underline是 amis-ui 排版工具类体系中最基础、最常用的三个文本装饰类，它们由 _text-decoration.scss 中的make-text-decoration混入统一生成，并自动附带m:（移动端）与pc:（桌面端）两套响应式变体。配合 文本颜色、文本对齐 等相邻工具类，可以在不编写任何自定义 CSS 的情况下，仅通过 JSON 配置中的className字段完成丰富的文本装饰效果，是 amis 低代码页面样式控制的重要拼图之一。

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