lighten() 和 darken() 易致失真或编译失败，真正可用的交互色需结合 mix()、adjust-color() 与明度边界控制；mix() 更自然安全，adjust-color() 可协同调亮暗与饱和度，且须分主题适配深色模式并校验 wcag 对比度。
lighten() 和 darken() 能快速生成 hover / active 色，但直接套用极易失真或编译失败；真正可用的交互色必须结合 mix()、adjust-color() 和明确的明度边界控制。
lighten() / darken() 在按钮状态中为什么经常“变脏”而不是“变亮/暗”
这两个函数在 HSL 空间里对 lightness 通道做线性加减，不考虑人眼感知和色彩边界：
-
lighten(#ff6b6b, 20%)会让珊瑚红的 L 值硬加 20%，结果发灰、失去活力，不是提亮而是污染 -
darken(#000, 15%)仍输出#000，lighten(#fff, 10%)还是#fff——极值色无调节空间 - 数值超过 25% 极易触发 Sass 编译错误：
"Lightness must be between 0 and 100" - 对高饱和色（如
#ff0000）或低饱和灰阶色（如#888）调节后视觉变化微弱，但代码已膨胀
mix() 是按钮状态色更安全的替代方案
用白色/黑色按比例混合，结果更自然、可预期，且完全绕过 HSL 明度限制：
- hover 背景：用
mix(white, $primary, 20%)比lighten($primary, 20%)更柔和，不易过曝 - active 背景：用
mix(black, $primary, 15%)比darken($primary, 15%)更稳，避免陷入近黑不可见区 - disabled 文字：用
mix(white, $primary, 60%)可控地提亮，而lighten($primary, 40%)在深色基底上可能产出粉白失真色 - 对
#000或#fff同样有效：mix(white, #000, 30%) → #4d4d4d，结果确定，不报错
需要同步调亮度+饱和度时，用 adjust-color()
按钮悬停既要提亮又要防荧光感？adjust-color() 是唯一能一步协同调整的函数：
- hover 态推荐写法：
adjust-color($primary, $lightness: +12%, $saturation: -8%)，提亮同时压饱和，避免刺眼 - active 态可反向：
adjust-color($primary, $lightness: -10%, $saturation: +5%)，加深同时略增稳重感 - 注意单位必须是
%或deg，写成12px或"12%"会编译失败 - 它不改变 alpha，如需透明度联动，得额外加
$alpha参数，例如$alpha: -0.1
批量生成按钮状态类时，别让 map 和循环埋下隐患
用 @each 遍历按钮类型时，颜色推导逻辑必须收口在局部作用域内：
- 禁止把
$btn-colors定义为全局变量再反复@each，否则不同模块覆盖导致输出错乱 - 避免类名裸奔：
.btn-primary:hover容易被第三方库覆盖，建议加前缀如.u-btn-primary:hover - 所有生成的颜色值必须是合法 CSS 颜色，不能返回字符串：
@return 'lighten(' + $c + ', 10%)'是典型错误，浏览器收到的是无效值 - 深色模式下，同一套
lighten($base, 20%)在黑背景上可能产出灰蒙蒙的#4d4d4d，文字对比度崩坏——此时必须分主题定义，而非复用同一函数
最难的不是写出 lighten($color, 15%)，而是意识到：按钮交互色不是数学题，它卡在 WCAG 对比度底线、HSL 模型缺陷、人眼对饱和度的敏感阈值之间。每次调用前，得打开 DevTools 的无障碍面板手动校验文本是否 ≥4.5:1，而不是相信函数“应该没问题”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
