为什么CSS在Sass中使用lighten()后颜色表现异常？

lighten()仅线性增加HSL的L值，不考虑人眼感知，易致发灰、失真、溢出或无效；对极值色和高饱和色不可靠，rgba透明度会被丢弃，且Dart Sass 3.0起已弃用，推荐改用mix(white, $color, 20%)或color.adjust()。

lighten() 操作的是 HSL 的 L 值，不是人眼感知亮度

它把颜色转成 HSL 后，只对 L（Lightness）分量做线性加法，比如 lighten(#0a2b5c, 30%) 是把原 L≈18% 直接 +30 → 48%，不考虑色相敏感度。结果常发灰、偏青，尤其对蓝/红/紫这类人眼本就“看起来暗”的颜色，视觉上不是变亮，而是失真。

极值色和高饱和色会失效或溢出

lighten(#fff, 10%) 还是 #fff，darken(#000, 15%) 还是 #000——HSL 的 L 已到边界，无法再调。对 #ff6b6b（珊瑚红）用 lighten($color, 20%)，L 值硬拉高后饱和度被稀释，颜色变脏；若起始 L 接近 85%，+20% 就超 100，Sass 会截断为 100%，直接变成 #ffffff。

rgba 颜色会被先转为不透明再计算

lighten(rgba(0, 0, 0, 0.5), 10%) 实际按 #000 处理，结果仍是 #000；透明度信息在转换阶段就被丢弃了。想保留 alpha 并提亮，得手动组合：transparentize(lighten($color, 10%), 0.5)，但注意 lighten() 本身不处理 alpha。

新版 Dart Sass 中 lighten() 已被标记弃用

从 Dart Sass 3.0 起，lighten() 和 darken() 会触发 Deprecation Warning [color-functions]: lighten() is deprecated，未来版本将移除。最新推荐改用模块化写法：@use "sass:color" 后调用 color.adjust()，或更稳妥地用 mix(white, $color, 20%) 替代——后者不依赖 HSL，对所有颜色都可预期，且无弃用风险。