color: sass 里的 lighten 和 darken的替代用法

在 Sass 中，lighten 和 darken 函数已经被标记为过时（deprecated），官方推荐使用更先进的 color.scale 和 color.adjust 函数来替代它们。以下是具体的替代用法和区别：

1. 使用 color.adjust 替代 lighten 和 darken

color.adjust 是直接对颜色的某个属性（如亮度、饱和度等）进行加减操作的函数。它的语法如下：

color.adjust($color, $property: value)

示例：替代 lighten

假设原来使用 lighten：

$primary-color: #3b99fc;
$lighter-color: lighten($primary-color, 10%);

可以改为：

$primary-color: #3b99fc;
$lighter-color: color.adjust($primary-color, $lightness: 10%);

示例：替代 darken

假设原来使用 darken：

$primary-color: #3b99fc;
$darker-color: darken($primary-color, 10%);

可以改为：

$primary-color: #3b99fc;
$darker-color: color.adjust($primary-color, $lightness: -10%);

2. 使用 color.scale 替代 lighten 和 darken

color.scale 是按比例调整颜色属性的函数，更适合复杂的颜色操作。与 color.adjust 不同，它不会直接加减百分比，而是基于当前颜色的值进行比例调整。语法如下：

color.scale($color, $property: value)

示例：替代 lighten

假设原来使用 lighten：

$primary-color: #3b99fc;
$lighter-color: lighten($primary-color, 10%);

可以改为：

$primary-color: #3b99fc;
$lighter-color: color.scale($primary-color, $lightness: 10%);

示例：替代 darken

假设原来使用 darken：

$primary-color: #3b99fc;
$darker-color: darken($primary-color, 10%);

可以改为：

$primary-color: #3b99fc;
$darker-color: color.scale($primary-color, $lightness: -10%);

3. color.adjust 和 color.scale 的区别

• color.adjust：直接对颜色属性进行加减操作。例如，将亮度增加 10% 或减少 10%。
• color.scale：按比例调整颜色属性。例如，将亮度增加或减少当前亮度值的 10%。这种方式更适合保持颜色的视觉一致性。

4. 为什么弃用 lighten 和 darken

根据官方文档，lighten 和 darken 函数的工作原理是将颜色转换为 HSL 格式，然后直接调整亮度值。然而，这种方式可能会导致生成的颜色在色相和饱和度上发生轻微变化，影响视觉效果。而 color.scale 和 color.adjust 提供了更精确和灵活的颜色操作方式，因此被推荐作为替代方案。

总结

• 如果需要简单地加减亮度值，可以使用 color.adjust。
• 如果需要按比例调整颜色亮度，建议使用 color.scale。
• 确保使用最新版本的 Dart Sass，以支持这些新特性。

通过以上方法，你可以轻松替换掉 lighten 和 darken，并利用现代 Sass 的功能实现更高质量的颜色处理。