color.adjust() 是 darken()/lighten() 的唯一合理替代，因其是 dart sass 官方指定的模块化方案，通过 @use "sass:color" 引入后以 color.adjust($color, $lightness: ±x%) 调用，可协同调节多通道避免色相失真，而旧函数因 hsl 空间算法缺陷及全局污染已被弃用。
为什么 color.adjust 是 darken()/lighten() 的唯一合理替代
因为 darken() 和 lighten() 已被 Dart Sass 明确标记为 deprecated，未来版本（如 Dart Sass 3.0）将直接移除。它们的问题不只是“过时”，而是算法缺陷：在 HSL 空间里硬调 L 值，不联动 S，导致红/橙/紫系颜色提亮后发粉、加深后浑浊。而 color.adjust() 是官方指定的模块化替代方案，它从设计上就支持多通道协同修正。
如何正确引入并调用 color.adjust()
必须先 @use "sass:color"，不能省略引号和路径；函数必须通过命名空间调用，即 color.adjust()，不是 adjust() 或全局 adjust-color()（后者是旧语法，已逐步淘汰）。
- 错误写法：
darken($primary, 10%)、adjust-color($primary, $lightness: 10%)、@use sass:color as c后写c.adjust()（虽能运行但违背官方推荐命名约定） - 正确写法：
@use "sass:color"; ... background: color.adjust($primary, $lightness: 10%) - 注意：Sass 不支持 CSS 原生
color-mix()或color-contrast()，那些是纯 CSS 函数，与color.adjust()无关
color.adjust() 参数怎么填才不翻车
$lightness 和 $saturation 必须成对观察——单独调亮度大概率失真。例如对 #e63946（设计稿主红）做悬停提亮，只写 $lightness: 12% 会变脏粉；应补 $saturation: -8% 抑制荧光感。
-
$lightness范围是0%–100%，超出报错：“Lightness must be between 0 and 100” -
$saturation推荐微调 ±5%～12%，大幅增减（如 +30%）易让蓝变青、红跳橙，需肉眼校验 -
$hue单位必须是deg，写成%或漏单位直接编译失败 - 不要传
null占位：旧式adjust-color($c, null, $lightness: 10%)在color.adjust()中无效
批量替换时最容易漏掉的三个地方
搜索替换不能只盯 darken( 和 lighten(，还要处理它们的变体和上下文依赖。
- SCSS 变量赋值：比如
$btn-hover: lighten($blue, 8%)→ 必须改为$btn-hover: color.adjust($blue, $lightness: 8%, $saturation: -5%) - 嵌套 mixin 中的内联调用：如
@mixin btn-theme($c) { &:hover { background: darken($c, 12%) } }，这里darken不在顶层，容易被 grep 漏掉 - 第三方 UI 库覆盖样式：Element Plus、Ant Design Vue 的主题文件常含大量
darken()，需检查node_modules外的自定义 theme.scss
真正麻烦的不是语法替换，而是每个颜色都要重校视觉合理性——同一套 $lightness: 10% 对蓝色和红色的效果天差地别，没有银弹参数，只能逐处肉眼比对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
