lighten()并非变亮而是直接增加HSL的L值，如hsl(200,50%,70%)经lighten($color,20%)变为hsl(200,50%,90%)；浅色易溢出为#fff，深色慎用darken()以防失可读性，带alpha时仅RGB受影响。
lighten() 不是“变亮”，而是直接加 HSL 的 L 值
它不混合白色，也不做感知校正，就是把当前颜色的 lightness 通道数值 + 百分比。比如 hsl(200, 50%, 70%) 经 lighten($color, 20%) 后变成 hsl(200, 50%, 90%)——L 值从 70 到 90，不是“加了 20% 白色”。这导致：
- 浅色（L > 80%）极易溢出为
#ffffff，比如lighten(#e0e0e0, 15%)直接变纯白 - 深色（L darken() 几乎无反应，因为 L 已到下限（0%）
- 纯黑
#000或纯白#fff调用lighten()/darken()完全无效
带 alpha 的颜色只调 RGB，透明度纹丝不动
lighten(rgba(50, 50, 50, 0.5), 20%) 输出的是 rgba(120, 120, 120, 0.5)：灰度变亮了，但 alpha 还是 0.5。如果你期望“更通透地变亮”，那是错觉——lighten() 根本不碰 alpha。
想同时提亮又降透明度？得手动组合：fade-out(lighten($color, 20%), 0.1)，但注意 fade-out() 在 Sass 4.0+ 已弃用，应改用 transparentize()。
编译期固定值 vs 运行时需求错配
你在 SCSS 里写 --primary-light: #{lighten($primary, 10%)}，结果生成的是硬编码 CSS 值，比如 --primary-light: #a8c6ff。这个值在构建时就定死了，无法响应 prefers-color-scheme: dark 或用户切换主题。
立即学习“前端免费学习笔记（深入）”；
真正需要运行时调节亮度的场景（如深色模式适配），必须放弃 lighten()，改用：
- CSS 原生
hsl(var(--h), var(--s), calc(var(--l) + 10%)) - 或
color-mix(in oklch, var(--color), white 10%)（Chrome 111+/Safari 16.4+/Firefox 117+）
对比度失控却毫无警告
lighten() 不管可访问性。从 #f0f0f0 提亮 5% 得到 #f5f5f5，和白色文字搭配时对比度常低于 WCAG AA 标准（4.5:1）。Sass 编译器不会报错、不会提示，它只忠实地算数。
关键文本色别靠函数链式推导，例如 $text-primary: lighten($base-gray, 5%)；应单独定义并用 DevTools 无障碍面板实测验证。深色模式下尤其危险——同一套 lighten() 值在浅/深背景上对比度表现可能天差地别。
