应改用 adjust-color() 或 mix() 替代 lighten()/darken()，因其在 hsl 空间直接增减亮度导致色相失真、饱和度暴跌，尤其红/橙/紫区域发灰；adjust-color() 可联动明度与饱和度，mix() 则通过颜色混合保色相更稳定。
直接改用 adjust-color() 或 mix() 替代 lighten()/darken()，否则色值会发灰、失饱和，尤其在红/橙/紫区域明显。
为什么 lightendarken 会导致色值异常
这两个函数直接在 HSL 空间里增减 L（亮度）值，不考虑人眼对不同色相的明暗敏感度差异。比如对 #ff6b6b（珊瑚红）执行 lighten($color, 20%)，结果不是“变亮的红”，而是“偏粉、发灰、饱和度暴跌”的怪色。
常见错误现象：
- 按钮悬停后颜色变脏，像蒙了一层灰雾
- 深色模式下
darken($blue, 15%)出现蓝黑混浊，失去冷调清晰感 - 设计稿给的
#e63946主色，用lighten()衍生出的浅色和 UI 设计师预期严重不符
用 adjust-color() 精准联动明度与饱和度
adjust-color() 是 SCSS 中唯一能同时修正多个通道的函数，适合模拟真实光照下的颜色响应——提亮时略降饱和，加深时微调色相，更符合视觉直觉。
实操建议：
- 悬停变亮 + 控制发白：
adjust-color($base, $lightness: 8%, $saturation: -10%) - 禁用态加深 + 避免死黑：
adjust-color($base, $lightness: -12%, $saturation: -5%, $hue: 2deg) - 绝对不要传超限值：
$lightness: 105%会触发编译报错"Lightness must be between 0 and 100" - 慎用
$hue大幅偏移：+30deg 可能让蓝色变青，但红色可能跳成橙，需肉眼校验
mix() 更安全的“视觉淡色”替代方案
当目标只是让颜色看起来“淡一点”或“带点蒙版感”，mix() 比任何明度函数都稳定，它本质是颜色混合，不是空间映射。
使用场景与要点：
- 替代
lighten($color, 20%)→ 改用mix($color, white, 20%)，结果更通透、保色相 - 替代
darken($color, 15%)→ 改用mix($color, black, 15%)，避免陷入脏灰 - 权重写法要规范：
mix(#f00, #00f, 30%)和mix(#f00, #00f, 0.3)等价；别写"30%"字符串，会报错 - 透明度参与计算但不输出透明色：
mix(rgba(255,0,0,0.5), #fff, 50%)输出的是rgba(255,128,128,0.75)，不是半透红
CSS 变量传入后 SCSS 函数完全失效
SCSS 所有颜色函数（lighten、mix、adjust-color）都在编译期运行，而 CSS 变量（如 --primary: #4a90e2）是运行时才生效，二者生命周期不重叠。
典型错误写法及后果：
-
lighten(var(--primary), 10%)→ 编译报错"Invalid CSS after 'lighten': expected expression" -
$c: var(--primary); mix($c, white, 20%)→ Sass 把var(--primary)当字符串处理，结果是无效色值甚至黑屏 - 想靠 SCSS 函数动态响应深色模式切换？不行。必须用原生
color-mix()或 JS 注入逻辑
真正需要运行时颜色调整的地方，别碰 SCSS 颜色函数——它们只适合生成静态色板，不是主题引擎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
