lighten() 和 darken() 仅机械调整 hsl 的 l 值，不保证视觉合理：易致色相失真、发粉或变黑；安全用法限中等明度/饱和度色且调整≤10%；推荐 mix()、adjust-color() 或预设梯度替代。
lighten() 和 darken() 在 SCSS 中能“算出”新颜色，但不是“视觉上合理地变亮/变暗”——它们只是机械地加减 HSL 的 L（亮度）值，对多数非中性色会失真。
lighten() 和 darken() 实际做了什么
这两个函数把输入颜色转成 HSL，只动 L 值，其他分量（H、S）原封不动：
→ lighten(#ff6b6b, 20%) 是把 L 从 ~55% 拉到 75%，饱和度仍 70%，结果发粉；
→ darken(#036, 30%) 把 L 从 ~20% 直接压到 -10%，浏览器 clamp 到 0%，变成纯黑，原色相消失。
常见错误现象：
-
lighten(#fff, 5%)编译后还是#fff—— 已达亮度上限，无效 - 在深蓝按钮 hover 时用
darken($blue, 25%)，hover 状态突然变黑，用户觉得“闪一下” - 红/橙/紫系主色配
lighten($color, 15%)作禁用态文字，实际偏灰、辨识度下降
哪些场景下可以放心用
只有当颜色本身处于“安全区”，且调整幅度小，才不易翻车：
- 基础色明度在 30%～70% 之间（如
#3498db的 L≈53%） - 饱和度中等（40%～60%），避开高饱和暖色（如
#e74c3c） - 调整量 ≤10%，超过 15% 就要警惕发灰或色相塌陷
- 仅用于中性交互反馈：比如灰色背景上的文字 hover，
lighten(#666, 8%)可接受
别把它当“视觉提亮工具”，它只是“HSL-L 偏移器”。
比 lighten()/darken() 更靠谱的替代方案
想让颜色变浅/变深更自然，优先考虑语义更清晰、空间更合理的函数：
- 用
mix(white, $color, 20%)替代lighten($color, 20%)：模拟加白粉，柔和不突兀 - 用
mix(black, $color, 15%)替代darken($color, 15%)：比硬压 L 值更保留色相特征 - 用
adjust-color($color, $lightness: 10%, $saturation: -5%)：提亮同时微量降饱和，防发粉 - 对关键色（如品牌主色），预设一组手调好的深浅梯度变量，而非 runtime 计算
例如：$primary-100: mix(white, $primary, 15%) 比 $primary-100: lighten($primary, 15%) 更可控。
CSS 变量里没法用 lighten()/darken()
这是编译期函数，CSS 变量是运行时机制。写 --lighter: lighten(var(--color), 10%) 会直接被浏览器忽略或报错。
如果必须在纯 CSS 中动态调光暗：
- 用
hsl()+calc()：前提是基础色必须用hsl()格式定义，且拆出--h、--s、--l三个变量 - 现代浏览器可用
color-mix(in srgb, var(--color), #000 12%)，行为更接近真实混合，但 IE/旧 Safari 不支持 - JS 动态计算推荐用
chroma.js或culori，在 LAB 或 OKLCH 空间做感知一致的明度调整
真正容易被忽略的是：SCSS 的颜色函数不校验输入是否合理。一个 darken(#000, 5%) 看似无害，编译后就是 #000，但如果你依赖它生成悬停态，交互就会“没反应”。别信函数名，要看它实际输出了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
