sass数学运算不支持单位混合计算，需显式统一单位；除法须加括号；颜色调整慎用lighten()/darken()，推荐mix()或adjust-color()；rgba()的alpha必须为0–1小数，建议用opacify()/transparentize()；自定义函数须用type-of()校验颜色类型。
Sass数学运算不支持变量单位混合计算
直接写 $width: 10px + 2em 会报错，Sass不自动转换单位。它不是浏览器运行时环境，所有单位必须显式一致。
- 单位混用时，先统一转成同一单位：用
px就全转px，用rem就提前定义基准值（比如$base-font-size: 16px），再用#{...}或函数辅助换算 - 除法要加括号，否则
10px / 2可能被解析为 css 除法声明（如font: 10px/2），正确写法是(10px / 2) - 浮点数精度默认保留 5 位小数，但
round()、floor()等函数只接受纯数字，对带单位的值需先用unitless()判断或abs()提取数值部分
color() 函数族里 lighten() 和 darken() 不是线性调光
它们操作的是 HSL 色彩空间里的亮度通道（L），但人眼对明暗变化敏感度非线性，所以加 10% 不等于视觉上“变亮一档”——尤其在深色或浅色区域，容易过曝或发灰。
- 深色背景上慎用
lighten($color, 30%)，可能直接跳到灰白；建议改用mix(white, $color, 20%)控制更稳 -
adjust-color()更灵活，比如adjust-color($color, $lightness: 15%)，和lighten()行为接近但可组合其他调整（饱和度、色相） - 导出颜色变量时别依赖多次
lighten()堆叠，三次以后 L 值可能超出 0–100 范围，Sass 会静默截断，导致意外复位
使用 rgba() 时 alpha 参数传变量容易漏掉小数点
写成 rgba($color, 20) 不会报错，但结果是透明度 20（即 2000%），实际等价于 rgba($color, 1) —— 因为 Sass 把整数 20 当作 20.0，而 alpha 合法范围是 0–1。
- 正确做法：alpha 必须是 0–1 区间的小数，
rgba($color, 0.2)或用百分比除算rgba($color, 20% / 100) - 如果 alpha 来自配置变量（比如
$opacity: 15），务必写成rgba($color, $opacity / 100) - 更安全的替代：用
opacify()或transparentize()，它们明确接受 0–1 或百分比输入，且对超限值有容错（如transparentize($color, 120%)直接返回完全透明）
自定义函数中用 type-of() 判断颜色值类型很必要
用户传进来的可能是命名色（red）、十六进制（#ff0000）、rgb() 字符串，甚至 NULL —— 但 lighten() 等函数只认颜色对象，传字符串会编译失败。
立即学习“前端免费学习笔记（深入）”；
- 在函数开头加判断：
@if type-of($color) != 'color' { @Error 'Expected a color, got #{$color}'; } - 命名色（如
blue）会被 Sass 自动转成颜色对象，但字符串形式的'blue'不会，注意引号 - 从 map 中取颜色变量时，记得用
map-get($colors, primary)而不是拼字符串，避免类型丢失
事情说清了就结束。最常被忽略的是单位混算和 alpha 数值范围——这两个地方不报错，但结果不对，查起来特别费时间。