lighten() 和 darken() 调整 hsl 的 lightness 通道，非线性混合黑白；对深色提亮明显，浅色易溢出为纯白；深色慎用 darken() 防失可读性；带 alpha 颜色仅 rgb 受影响，透明度不变。
lighten() 和 darken() 的实际效果不是线性变亮/变暗
这两个函数调整的是 HSL 色彩模型中的 lightness 通道，不是简单地混合白色或黑色。比如 lighten(#333, 20%) 是把原色的 lightness 值增加 20 个百分点（0–100），而不是“加 20% 白色”。这意味着对深色（如 #111）用 lighten() 效果明显，但对浅色（如 #eee）再调高可能直接溢出成 #fff——它不防越界。
- 深灰
#222→lighten(#222, 30%)≈#7d7d7d（可感知变亮） - 浅灰
#e0e0e0→lighten(#e0e0e0, 15%)=#ffffff（一步到白，丢失层次） - 饱和色如
#ff6b6b用darken()过度会迅速发黑、失彩，不如改用desaturate()+darken()组合
darken() 在深色模式下容易“吃掉”细节
当基础色已经较暗（lightness ），<code>darken($color, 10%) 可能让文字或边框失去可读性。Sass 不校验对比度，它只忠实地算 HSL —— 所以 darken(#1a1a1a, 15%) 得到 #000000，和背景融为一体。
- 检查原始色的 lightness：用浏览器开发者工具拾色器看 HSL 值，或写个临时调试函数
@debug hsl-lightness($color) - 对
lightness 的色值，避免用 <code>darken()超过 5%，优先考虑mix($color, #000, 10%) - 按钮悬停态若用
darken($primary, 10%)，在深色主题里可能和禁用态颜色撞车，需单独定义深色变量
Sass 4.0+ 后 lighten() 对 opacity 不生效
带 alpha 的颜色（如 rgba(0, 0, 0, 0.8) 或 hsla(0, 0%, 0%, 0.8)）传给 lighten() 时，Sass 只操作 RGB 部分，alpha 保持不变。这没问题；但如果你期望“半透明色变亮后更通透”，那是错觉——亮度调整不改变透明度。
-
lighten(rgba(50, 50, 50, 0.5), 20%)→rgba(120, 120, 120, 0.5)（灰度变亮，透明度照旧） - 想同时提亮又降 opacity？得手动组合：
fade-out(lighten($color, 20%), 0.1) - 旧版 Sass（lighten(rgba(...), n%) 是否报
Invalid CSS after "...": expected expression
替代方案：用 adjust-color() 更可控
当 lighten()/darken() 太粗暴，adjust-color() 允许你单独调 $lightness、$saturation、$hue，还能限制范围不溢出。
-
adjust-color(#333, $lightness: 15%)等价于lighten(#333, 15%)，但语义更明确 - 想“提亮但保饱和度”：
adjust-color(#ff6b6b, $lightness: 20%, $saturation: -10%) - 避免溢出：自己加 guard，例如
@if hsl-lightness($color) + $delta > 100 { @return adjust-color($color, $lightness: 100 - hsl-lightness($color)) }
Sass 的亮度函数本质是 HSL 数学运算，不是视觉校准工具。真正难的不是怎么调，而是调完之后——人眼是否还认得出这是同一个色系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
