如何在Sass中动态处理CSS的行高与字间距？-css教程-PHP中文网

line-height 必须用 math.div() 计算，因 sass 旧版将 / 视为列表分隔符，24px / 16px 会编译为非法值；sass 1.33+ 需 @use "sass:math" 后调用 math.div(24px, 1rem) 得无单位响应式值。

如何在sass中动态处理css的行高与字间距？

line-height 必须用 math.div() 算，别用 / 除号

Sass 旧版本把 / 当作列表分隔符，24px / 16px 不会返回 1.5，而是编译成 24px 16px 这个非法值，导致样式失效或警告。Sass 1.33+ 要求显式导入 @use "sass:math"，再用 math.div(24px, 16px) 才能得到可靠数字。

常见错误现象：line-height: 24px / 16px 在编译后变成空白或报错；math.div(24px, 1rem) 才是响应式写法，它输出无单位值（如 1.5），随根字号缩放；若硬写 math.div(24px, 16px)，用户调大系统字体时行高就卡死不动。

必须加 @use "sass:math"，漏掉就报 Undefined function math.div()
基准用 1rem，不是 16px —— 后者在用户设为 20px 根字号时直接失真
结果直接赋给 line-height：它本就要无单位值，math.div() 返回的正好匹配

letter-spacing 别全局设，按场景微调

letter-spacing 对中文是“字间距”唯一有效手段，但它不是美化开关，而是手术刀：标题可加 0.05em 缓解大字号拥挤，正文段落加负值（如 -0.02em）极易在小屏上粘连，尤其思源黑体这类已优化字距的字体，强行加反而破坏节奏。

可访问性风险常被忽略：屏幕阅读器不解析 letter-spacing，但正值 > 0.12em 会让语音停顿异常；WCAG 明确建议上限为 0.12em。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

优先用 em 单位，比如 letter-spacing: 0.08em，随字号等比缩放
小字号下（0.875rem）可用 1px 更稳，避免 0.05em 在 14px 下变成 0.7px 导致渲染模糊
别在长段落里设，只用于标题、标签、按钮文字等短文本

行高与字间距必须配合，不能套一个全局值

同一页面里，h1、正文 p、引用块 blockquote、代码 code 的 line-height 和 letter-spacing 往往该不同。比如霞鹜文楷字怀宽大，line-height: 1.5 已足够；而思源黑体正文常用 1.7–1.8。盲目统一拉高到 2.0，锚点链接点击区域会虚化——点文字边缘可能触发不到。

调试时容易漏掉这点：给元素临时加 border: 1px solid #f00，能看清实际行框范围，比凭感觉调准得多。

line-height 配合 -webkit-line-clamp 时，max-height 必须等于 line-height × 行数，单位统一用 em 或 calc()，别用 px 锁死
Flex 容器里 line-height “失效”，其实是被 align-items 覆盖了：设 align-items: center 才看得见效果
行内元素（span、图标）要上下居中，得配 vertical-align: middle，不是硬调 line-height

Sass 循环生成工具类时，别让 line-height 和 letter-spacing 脱钩

用 @each 遍历 $font-sizes map 生成字号工具类时，如果只输出 font-size，不联动 line-height，结果就是文字发“虚”：16px 字号配 1.2 行高还行，24px 字号还用 1.2 就显得单薄。更糟的是，批量生成的 .text-lg 类若没内置 letter-spacing，标题拉开字距还得额外写一遍。

性能影响很实际：一个 5 断点 × 10 字号 × 4 行高系数的组合，CSS 体积轻松破百 KB；而命名冲突更隐蔽——生成的 .lh-15 若和第三方库同名，!important 不是解药，只会让调试雪上加霜。

用 map 同步存 $line-heights 和 $letter-spacings，遍历时用 map-get($line-heights, $key) 注入
加前缀隔离，比如 $prefix: "t-"，生成 t-lh-15、t-ls-005，避开 Bootstrap/Tailwind 撞车
禁用 !important —— 它破坏层叠，且无法被后续样式覆盖