color.adjust 是 Dart Sass 1.33+ 推荐替代已废弃的 lighten()/darken() 的现代写法，按通道相对调整更可控；从 1.70 起 deprecated，1.80+ 触发警告，因其在 HSL 中粗暴调 L 值易致色相失真；需 @use "sass:color" 后用命名参数如 $lightness: 20%，支持多通道叠加但不支持负百分比简写；更自然的替代是 mix(white, $color, 20%) 等，预定义梯度变量更稳妥。
color.adjust 是 Dart Sass 1.33+ 推荐的现代写法，用来替代已废弃的 lighten() 和 darken()。它不直接操作 HSL 的 L 值，而是按通道（$lightness、$saturation、$hue 等）做相对调整，结果更可控、更符合设计直觉。
为什么不能继续用 lighten()
从 Dart Sass 1.70 开始，lighten() 和 darken() 被标记为 deprecated；1.80+ 版本会触发编译警告，未来版本可能移除。根本原因是它们在 HSL 空间里粗暴增减亮度（L），对红/橙/紫等色相容易导致“发粉”“失饱和”，比如 lighten(#ff6b6b, 20%) 会产出偏灰的浅粉，而非自然提亮的珊瑚色。
怎么写 color.adjust() 替代 lighten($color, 20%)
必须先 @use "sass:color"，再调用函数。注意参数名是带美元符的命名键值对，不是位置参数：
@use "sass:color";
$primary: #007BFF;
.button {
background: $primary;
&:hover {
background: color.adjust($primary, $lightness: 20%);
}
}
-
$lightness: 20%表示“提升明度 20%”，不是设成 20%，也不是百分比增量（和旧lighten()数值语义一致，但实现不同） - 可叠加多个通道：例如
color.adjust($color, $lightness: 15%, $saturation: -5%)，适合按钮悬停时既变亮又防过艳 - 不支持负百分比写法如
$lightness: -10%来模拟darken()，得显式写$lightness: -10%—— 它本身支持负值
比 color.adjust() 更柔和的替代方案
如果目标是视觉上“更自然地变浅”，color.adjust() 仍可能在高饱和色上略生硬。这时优先考虑：
- 用
mix(white, $color, 20%)替代lighten($color, 20%)：模拟加白粉，保留色相特征，尤其适合品牌色 - 用
mix(black, $color, 15%)替代darken($color, 15%)：比压 L 值更沉稳，不易脏 - 关键色梯度建议预定义变量，例如：
$primary-200: mix(white, $primary, 15%)，而非每次 hover 都计算
真正要警惕的是把 color.adjust() 当作“无脑替换”——它解决了废弃警告，但没解决 HSL 明度模型本身的视觉偏差。对主色、按钮、状态色，手动调一组 mix() 梯度仍是目前最稳妥的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
