lighten() 和 darken() 在悬停中常失真，因其仅机械增减 HSL 的 L 值，导致非中性色明度越界或偏色；应改用 mix(black, $color, X%) 或 adjust-color() 联动微调，并避免作用于 CSS 变量。
lighten() 和 darken() 在悬停中为什么经常翻车
它们不是“让颜色变深”，只是机械地加减 HSL 的 L 值，对多数非中性色会失真。比如 darken(#036, 25%) 把明度从 ~20% 直接压到 -5%，浏览器 clamp 成 #000，原蓝色完全消失；lighten(#ff6b6b, 15%) 会让珊瑚红发粉，不是提亮，是漂白。
常见错误现象：
-
darken($brand-blue, 30%)编译后变成纯黑，按钮 hover 看起来像“闪一下” - 深灰背景上用
lighten($bg, 40%)生成文字色，结果仍是不可读的浅灰 - 对
rgba(51, 51, 51, 0.8)调用darken()，Sass 直接报错 “Operation on an invalid type”
mix(black, $color, X%) 是更安全的加深方案
mix() 模拟物理混合，保留色相特征，比硬调 L 值更接近真实视觉反馈。尤其适合按钮、标签等需保持品牌色一致性的场景。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- hover 加深 15%？写
mix(black, $color, 15%)，不是darken($color, 15%) - 避免用超过 25% 的混合比例，否则易变闷、失彩
- 对高饱和暖色（如
#e74c3c），搭配desaturate($color, 5%)再 mix，防偏色 - 编译后检查输出值：用 DevTools 确认对比度 ≥ 4.5:1，OLED 屏下仍可辨
adjust-color() 实现明度+饱和度联动微调
单靠变暗不够自然？adjust-color() 允许你同步控制多个通道，模拟光照变化下的真实响应。
典型写法：
- 按钮 hover 既要加深又要稳住色相：
adjust-color($base, $lightness: -8%, $saturation: -5%) - 深色模式下轻微提亮文字：
adjust-color($text, $lightness: 6%, $saturation: -3%) - 别写
$lightness: -100%—— Sass 会报 “Lightness must be between 0 and 100”
SCSS 函数无法作用于 CSS 变量，别踩这个坑
lighten(var(--primary), 10%) 这种写法直接报错，因为 SCSS 函数运行在编译期，而 var(--primary) 是运行时才解析的值。
可行路径：
- 把主题色定义为 SCSS 变量：
$primary: #4a90e2;，再用函数处理，最后赋给 CSS 变量：--primary-hover: #{darken($primary, 10%)} - 需要多主题？构建时生成多套 CSS 变量，而不是试图在浏览器里算
- 真要运行时动态？用 JS 解析
getComputedStyle后的 RGB 值再计算，但精度和透明度支持差，慎用
真正难的不是写对函数，而是验证输出是否在各种屏幕、各种对比度下都可用——别只盯着编译结果看 HEX 值。
