根本原因不是函数“算错了”，而是传入值、单位、分支逻辑或色彩空间未对齐：lighten()/darken()在#000或#ff0000等极值/高饱和色上因hsl边界限制失效；mix()参数顺序或权重单位错误导致颜色漂移；adjust-color()通道单位缺失或符号错误引发静默失真；color()缺失fallback或色彩空间错配致整条声明被忽略。
根本原因不是函数“算错了”，而是你传进去的值、单位、分支逻辑或色彩空间没对齐——Sass 颜色函数不兜底，错一点就 visibly 偏移或直接编译失败。
lighten() / darken() 在极值色或高饱和色上失效
这两个函数在 HSL 空间做线性加减，但人眼和 CSS 渲染器都不按这个逻辑响应：
- 对
#000执行darken(#000, 10%)，结果仍是#000（L 值已到下限） - 对
#ff0000执行lighten(#ff0000, 25%)，可能触发编译错误："Lightness must be between 0 and 100" - 对浅灰
#e0e0e0提亮 15%，视觉变化微弱，但代码已膨胀，且容易越过#ffffff边界变成无效值
mix() 参数顺序和比例写反导致颜色“漂移”
mix() 的签名是 mix($color-1, $color-2, $weight)，其中 $weight 指的是 $color-1 占比。写反就会彻底偏离预期：
-
mix(#000, #ff6b6b, 20%)→ 深灰基底上混入 20% 珊瑚红，结果偏暗、稳重 - 误写成
mix(#ff6b6b, #000, 20%)→ 80% 黑主导，结果接近黑色，按钮 hover 效果“消失” - 权重用整数不用百分比（如
20而非20%）会触发 Sass 类型错误，编译中断
adjust-color() 的通道参数单位或符号写错
adjust-color() 对每个通道都要求显式单位，且正负号决定方向，漏写或错配会导致静默失真：
-
adjust-color(#ff6b6b, $lightness: +12)❌ 缺少%，Sass 当作无单位数值，行为未定义 -
adjust-color(#ff6b6b, $lightness: 12%)❌ 默认是“增加”，但若原色已很亮，+12% 可能溢出；应明确写+12%或-12% -
adjust-color(#ff6b6b, $alpha: -0.2)✅ 正确：$alpha是小数，范围 0–1，负值 = 降低不透明度
color() 函数因色彩空间缺失或 fallback 缺位被整条丢弃
color(display-p3 1 0.4196 0.4196) 这类写法在普通显示器上不会“降级显示”，而是整条声明被浏览器忽略：
- 漏写
display-p3或拼成displayp3、p3，CSS 规则直接失效，连后面的background-color: #ff6b6b都不执行（如果在同一声明块里） - 写了
color(display-p3 ...)却没前置 fallback：background-color: #ff6b6b; background-color: color(display-p3 1 0.4196 0.4196);，旧版/非 P3 屏浏览器才会有颜色 - 把 sRGB 十六进制值硬塞进
display-p3坐标系（如color(display-p3 1 0.4196 0.4196)实际应为color(display-p3 0.97 0.34 0.31)），物理颜色错位，Mac 上显粉，Win 上发灰
真正难的不是调出一个“看起来差不多”的颜色，而是在任意设备、任意编译环境、任意调用上下文中，让输出始终是合法 CSS 值且语义可控——这要求你在写函数时就预判单位、分支、fallback 和色彩空间链路，而不是等它在打印预览或深色模式里突然变黑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
