amis-ui 行高工具类 leading-* 全解析从类名表到 SCSS 生成原理【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis本篇指南围绕 amis-ui 样式体系中 Typography 排版工具类的行高Line Height模块展开完整梳理 _line-height.md 中定义的 14 个leading-*类名与对应 CSS 值并结合 _line-height.scss 的 mixin 实现讲解工具类是如何通过 Sass 循环批量生成、rem 单位如何换算、以及m:/pc:响应式前缀的底层机制。读完本文你将能在 amis 页面与自定义样式中熟练使用行高工具类并理解其与字号工具类的联动关系。一、类名速查表一行一个行高行高工具类以leading-为前缀直接作为 HTML 的 class 使用即可生效。全部类名与对应声明如下ClassPropertiesleading-3line-height: 0.75remleading-4line-height: 1remleading-5line-height: 1.25remleading-6line-height: 1.5remleading-7line-height: 1.75remleading-8line-height: 2remleading-9line-height: 2.25remleading-10line-height: 2.5remleading-noneline-height: 1leading-tightline-height: 1.25leading-snugline-height: 1.375leading-normalline-height: 1.5leading-relaxedline-height: 1.625leading-looseline-height: 2按取值形式可划分为两组固定像素档位leading-3~leading-10使用rem单位与根字号强绑定适合需要精确控制段落间距、标题与正文对齐的场景。leading-3对应0.75rem12px此后每档递增0.25rem4px直到leading-10的2.5rem40px。语义比例档位leading-none~leading-loose使用无单位数值行高为当前元素font-size的倍数字号变化时行高按比例自动伸缩适合正文段落等需要随字号自适应的情况。例如leading-tight表示行高为字号的 1.25 倍。设计参考这一套命名与取值在较大程度上借鉴了 Tailwind CSS 的行高阶梯0.75rem → 2.5rem 与 1 → 2amis-ui 在引入该体系时保持了类名与值的一一对应便于开发者无缝迁移既有样式习惯。二、源码实现一个 mixin 批量生成全部类名类名表背后的实现非常简洁全部逻辑收敛在 _line-height.scss 的一个 mixin 中mixin make-line-height($prefix: .) { each $name, $value in ( 3: 0.75rem, 4: 1rem, 5: 1.25rem, 6: 1.5rem, 7: 1.75rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, none: 1, tight: 1.25, snug: 1.375, normal: 1.5, relaxed: 1.625, loose: 2 ) { #{$prefix}leading-#{$name} { line-height: $value; } } } include make-line-height(); each $deivce in map-keys($devices) { include media-device($deivce) { include make-line-height(. selector-escape($deivce :)); } }核心机制有三点each遍历生成Sass map 中的$name与$value成对取出插值拼接为类名选择器#{$prefix}leading-#{$name}并写入对应的line-height: $value。14 个类名全部由此循环产出新增档位只需在 map 中加一行。$prefix参数化mixin 接受类名前缀参数。默认前缀为.生成普通类.leading-3响应式分支传入. selector-escape($deivce :)生成带设备前缀的类。include media-device(...)包裹第二次循环将每个设备名作为media-device的入参把整套行高类复制进对应的媒体查询块中从而得到移动端 / PC 端专属的类名。三、响应式前缀m: 与 pc: 的由来源码末尾each $deivce in map-keys($devices) { include media-device($deivce) { include make-line-height(. selector-escape($deivce :)); } }设备集合定义在 _variables.scss$devices: ( m: (max-width: 768px), pc: (min-width: 769px) ) !default;map-keys($devices)取出m与pcmedia-device将其展开为对应媒体查询实现见 _mixins.scss 的media #{$n} { content; }。selector-escape见 _functions.scss会把:转义为\:保证m:leading-5这类含冒号的类名选择器能正确被 CSS 解析。因此实际产物中每个普通类都有一份带设备前缀的副本用法示例!-- 移动端≤768px使用 1.25remPC 端≥769px使用 1.5rem -- p classm:leading-5 pc:leading-6自适应行高的段落文本/p四、rem 单位的换算基准rem值均以根字号为基准。amis-ui 在 _variables.scss 中声明了换算基准$ns: !default; $remFactor: 16px !default;px2rem函数_functions.scss负责将像素值换算为 remfunction px2rem($pixels, $context: $remFactor) { ... return math.div($pixels, $context) * 1rem; }即默认以 16px 根字号换算0.75rem 12px、1rem 16px、1.25rem 20px……依次类推。若你的页面根字号不是 16px例如设置为 14px所有leading-*的像素档位会按比例整体缩放而leading-none/leading-tight等无单位档位不受影响这正是这两组取值设计上的互补之处。五、与字号工具类的联动行高与字号通常是成对出现的。在 _variables.scss 中amis-ui 的字号变量$fontSizes直接内嵌了配套行高$fontSizes: ( xs: 0.75rem 1rem, sm: 0.875rem 1.25rem, base: 1rem 1.5rem, md: 1.125rem 1.75rem, ... ) !default;map 中每项的第一个值对应font-size第二个值即推荐行高。对照 _font-size.md 可以看到text-sm同时声明font-size: 0.875rem; line-height: 1.25rem。也就是说字号工具类自带默认行高当你需要打破这套默认比例时才用leading-*覆盖例如!-- text-lg 默认行高 1.75rem这里覆盖为更紧凑的 1.25rem -- h3 classtext-lg leading-5覆盖默认行高的标题/h3当两者数值恰好相同时如text-base与leading-6都是 1.5rem工具类组合使用可让行高显式化便于团队约定与代码自解释。六、在 amis 页面中使用行高工具类可以直接用于 amis 的任意 schema 节点。最简单的方式是放在className上{ type: page, body: { type: static, label: 说明文字, content: 这是一段说明文本, className: leading-relaxed } }也可以在自定义tpl模板中直接作用于 HTML 元素{ type: tpl, tpl: div class\leading-7\固定行高 1.75rem 的模板内容/div }需要说明的是工具类的生效依赖 amis-ui 的 helper 样式被正确引入。整套 helper 的入口是 helper.scss其中通过import ./helper/typography/line-height;见 helper.scss引入本模块并与font-size、font-family、text-align等其余排版工具类一起随主样式打包。因此在使用 amis 默认构建产物时leading-*无需额外配置即可直接使用。七、组合实践与注意事项垂直居中技巧当元素只有一行文本时可将行高设置为与容器高度一致例如h-102.5rem的容器配合leading-10即可实现单行文本垂直居中无需依赖 flex。多行文本慎用像素档位leading-3~leading-10为固定值多行文本建议改用leading-tight/leading-normal等无单位档位行高随字号自适应避免字号变化后行与行相互挤压。响应式覆盖顺序m:leading-*与pc:leading-*分别被限制在各自的媒体查询内max-width: 768px与min-width: 769px断点恰好衔接且互不重叠两套类名可以安全共存于同一元素。与全局类名的关系类名前缀默认由$ns控制当前默认空字符串因此类名直接以.leading-*出现在最终 CSS 中若未来引入命名空间所有工具类会统一加上前缀使用时以实际构建产物为准。结合 _line-height.scss 末行的注释// hover ?可以推断目前行高工具类暂未提供 hover 等状态变体如需状态联动可通过 amis 的onEvent事件动作或自定义 CSS 扩展实现。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考