SCSS中line-height应全程保持无单位数值（如1.5），避免用px/em插值或函数返回带单位值，否则子元素行距会因继承固定像素而崩塌。
SCSS编译后line-height变成px值，子元素行距崩了
这不是SCSS bug，是变量或函数计算时隐式转成了绝对单位。比如你写了 $base-line-height: 1.5，但某处用了 line-height: #{$base-line-height * 16}px，结果就是 line-height: 24px——一旦子元素字号变大，这个24px就卡死不动，文字立刻重叠。
常见错误场景：
- 用
px单位参与数学运算，比如line-height: ($font-size * 1.5) + 2px - 从
map-get取出的值没做类型判断，实际是字符串"1.5"而非数字，乘法后变成"1.51.5"这种非法值，SCSS降级为1.5px - 混用
em和无单位值：父级设line-height: 1.5em，子级继承的是计算后的像素值，不是乘数
怎么写SCSS才能保住line-height的无单位特性
核心原则：所有涉及 line-height 的变量、计算、插值，必须全程保持无单位数值（即纯数字），不拼接任何单位字符串。
安全写法示例：
立即学习“前端免费学习笔记（深入）”；
$base-line-height: 1.5;
$base-font-size: 16px;
<p>// ✅ 正确：line-height 值始终是无单位数字
.text {
font-size: $base-font-size;
line-height: $base-line-height; // 编译为 line-height: 1.5
}</p><p>// ✅ 正确：用 calc() 把单位留在 CSS 运行时
.title {
font-size: 20px;
line-height: calc(#{$base-line-height} <em> 1em); // 编译为 line-height: calc(1.5 </em> 1em)
}避免这些写法：
-
line-height: #{$base-line-height}px→ 强制加 px，失去响应性 -
line-height: #{$base-line-height}em→ em 是相对单位，但会叠加祖先计算，易失控 -
@function get-line-height($multiplier) { @return $multiplier * 16px; }→ 返回带单位值，传给line-height就锁死了
用@function封装line-height时最容易踩的坑
很多人想写个 lh() 函数统一管理，但一不留神就把单位塞进去了。关键点在于：函数返回值类型必须是 number，不能是 string 或带单位的 length。
检查方法：在 DevTools 的 Computed 面板里看 line-height 值是不是带 px 或 em —— 如果是，说明函数输出已被固化。
可靠函数写法：
@function lh($multiplier: 1.5) {
@if type-of($multiplier) == 'number' and unit($multiplier) == '' {
@return $multiplier;
}
@else {
@warn "lh() expects a unitless number, got #{$multiplier}";
@return 1.5;
}
}
<p>// 使用
p { line-height: lh(1.6); } // 编译为 line-height: 1.6别这么干：
-
@return $multiplier + 'em'→ 返回字符串，SCSS 会当字面量处理 -
@return $multiplier * 1rem→ 返回带单位值，子元素继承的就是固定像素 - 函数里调用
map-get($config, 'line-height')却没验证返回值是否为 number
已编译出错的CSS怎么快速定位是SCSS哪一行导致的
打开浏览器开发者工具，选中文字容器，在 Computed 标签页里找到 line-height，点开右侧来源链接。如果跳转到一个 .css 文件而非 .scss，说明该样式是编译后硬编码的，大概率来自 SCSS 中某处显式写了 px 或 em。
搜索项目中的高危模式：
-
px出现在line-height:后面（尤其在 mixin 或循环里） -
#{...}px或#{...}em插值表达式 -
@each遍历 map 时直接把 value 当成数字用，没做unit()判断 - 第三方 SCSS 库（如 Bootstrap 4 的
_variables.scss）里定义了$line-height-base: 1.5，但你在自定义 mixin 里误写成#{$line-height-base}px
真正难调试的，是那些在多层嵌套 @include 和 @function 里悄悄把无单位值转成 px 的地方——它们不会报错，只会在不同字号下慢慢露出破绽。
