lighten()和darken()仅对中等明度饱和度色有效，因在hsl中直接增减l值，导致极值色失效、高饱和色失真、超限报错；应优先用mix()或adjust-color()，深色模式需分主题定义颜色并校验对比度。
lighten() 和 darken() 不是“通用明暗调节器”，它们只对中等明度、中等饱和度的颜色稳定有效；直接套在 #000、#fff 或高饱和色上，结果不可控，甚至编译失败。
lighten() / darken() 为什么经常失效
这两个函数在 HSL 空间里对 lightness 通道做加减运算，不是按人眼感知缩放。所以：
-
lighten(#fff, 10%)还是#fff，darken(#000, 10%)还是#000—— 边界值无法再调 - 对
#ff6b6b（珊瑚红）调lighten($color, 20%)，L 值硬加 20%，颜色发灰、失真，不是“变亮”而是“变脏” - 数值超过
25%极易撞到 HSL 上下限，Sass 编译报错："Lightness must be between 0 and 100"
替代方案：mix() 比 lighten() 更安全
用白色/黑色混合，视觉更自然，且不依赖 HSL 明度计算逻辑：
- 让按钮背景在浅色模式下“稍亮一点”：
mix(white, $primary, 15%)，比lighten($primary, 15%)更柔和、不易过曝 - 深色模式下边框“稍暗一点”：
mix(black, $border-base, 10%)，避免darken()在暗色上产出近黑不可见色 -
mix()对极值色友好：mix(white, #000, 50%)→#808080，结果可预期
需要精细控制时，优先用 adjust-color()
当你要同步调整亮度 + 饱和度（比如悬停态既要提亮又要防荧光），adjust-color() 是唯一能一步到位的函数：
- 提亮同时降饱和（更稳）：
adjust-color($color, $lightness: 8%, $saturation: -5%) - 加深同时微暖调（模拟阴影）：
adjust-color($color, $lightness: -12%, $hue: 3deg) - 老项目注意参数写法：
adjust-color($color, null, $lightness: 10%)（位置参数），新项目可用关键字$lightness: 10% - 别乱填
$hue: 15%—— 单位必须是deg，否则编译报错
深色模式下千万别直接用 lighten()/darken()
它们不感知背景明暗。同一句 lighten($bg, 30%) 在白底上可能刚好，在黑底上却产出灰蒙蒙的 #4d4d4d，文字几乎不可读。
- 正确做法是分主题定义：
$text-primary-light: #333/$text-primary-dark: #eee，再用@media (prefers-color-scheme: dark)切换 CSS 变量 - 如果非要推导，用
color.contrast-color($brand)直接取黑白中最优对比色，而不是靠lighten()猜 - 所有推导出的文本/边框色，必须用 DevTools 的无障碍面板人工校验 WCAG AA（≥4.5:1），Sass 不会替你检查
真正难的不是写对函数，而是意识到：颜色适配不是“自动算出来就行”，而是要在设计约束下做有意识的选择。函数只是工具，边界条件、人眼感知、对比度要求，这些才是落地时卡住你的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
