darken() 已被 Dart Sass 3.0 移除，必须改用 color.adjust() 或 color.mix()；需先 @use "sass:color"，且参数需合规，语义选择决定视觉效果。
darken() 已被 Dart Sass 明确弃用，不是警告可忽略，而是编译器在 3.0 版本中会直接移除。不改，项目迟早构建失败。
必须先加 @use "sass:color" 才能调用新函数
darken() 不再是全局函数，所有颜色操作都得走模块路径。没这行，color.adjust() 或 color.mix() 都会报错“Undefined function”。
- 必须放在文件顶部，且每个用到颜色函数的 SCSS 文件都要单独写（
@use不跨文件共享） - 别写成
@use "sass:color" as c后又漏掉别名调用——c.adjust()才对，color.adjust()仍无效 - 如果用了
@forward统一导出，确认_functions.scss里已@use "sass:color"并@forward "sass:color"
用 color.adjust() 替代 darken($color, 15%) 要控制参数联动
单纯把 darken($c, 15%) 换成 color.adjust($c, $lightness: -15%) 仍是错的——它只压亮度，不防发灰、不稳色相。
- 深化时建议同步微调饱和度：
color.adjust($c, $lightness: -12%, $saturation: -5%) - 对偏蓝/紫的主色，可加轻微暖调补偿：
color.adjust($c, $lightness: -10%, $hue: 3deg) -
$lightness值不能 ≤ -100 或 ≥ 100，否则编译报错 “Lightness must be between 0 and 100” - 别在
color.adjust()里传 CSS 变量：color.adjust(var(--primary), ...)会直接编译失败
更稳妥的替代：用 color.mix() 模拟“加黑”效果
color.mix($color, black, 15%)比任何单通道调整都更贴近视觉直觉，尤其适合按钮禁用态、文字加深等场景。
- 权重必须是数字或小数：
15、0.15合法；"15%"字符串会报错 -
color.mix(#ff6b6b, black, 20%)输出的是带灰阶但保红相的暗红，不会跳成脏褐 - 若原色含透明度（如
rgba(255,0,0,0.8)），混合结果会自动叠加 alpha，无需额外处理 - 它不依赖 HSL 转换，对极端明度色（如接近黑/白）也稳定
真正容易被忽略的点是：color.mix() 和 color.adjust() 的语义不同——前者是“物理混合”，后者是“空间修正”。选哪个，取决于你是在做 UI 层级的视觉反馈（选 mix），还是在做设计系统里的精确色阶推导（选 adjust）。混用或硬套参数，颜色依然会翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
