More info and automated migrator: https://sass-lang.com/d/import ╷ 100 │ $uni-success-light: lighten($uni-success,25%) !default; │ ^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src\uni_modules\uni-scss\styles\setting\_variables.scss 100:21 @import src\uni_modules\uni-scss\variables.scss 1:9 @import src\uni_modules\uni-icons\components\uni-icons\uni-icons.vue 2:9 root stylesheet Deprecation Warning [color-functions]: lighten() is deprecated. Suggestions:

### SASS `lighten()` 函数的弃用警告及迁移方案 #### 1. 背景介绍 Sass 是一种强大的 CSS 预处理器，提供了许多实用的功能和工具函数。然而，在 Sass 的最新版本中，`lighten()` 和 `darken()` 函数已被标记为废弃功能[^1]。这是因为这些函数依赖于简单的颜色计算方式，可能导致视觉上的不准确性。为了提供更好的色彩控制能力，Sass 推荐开发者迁移到基于 HSL（Hue-Saturation-Lightness）的颜色模型或其他现代方法。 --- #### 2. 弃用原因 `lighten()` 函数通过增加颜色中的亮度值来使颜色变亮，但它并未考虑人类感知颜色的实际效果。因此，在某些情况下，使用此函数可能会导致意外的结果，比如颜色看起来不够自然或不符合设计需求[^2]。 --- #### 3. 替代方案 以下是几种推荐的替代方法，用于实现与 `lighten()` 类似的效果： ##### (1) 使用 HSL 表达式 可以直接使用 HSL 颜色表示法手动调整亮度值。这种方法更加直观且精确。 ```scss $base-color: hsl(200, 50%, 50%); // 定义基础颜色 $brighter-color: hsla(200, 50%, 70%, 1); // 提高亮度至 70% ``` 这种方式的优点在于它完全透明地展示了颜色的变化过程，并且更容易预测最终结果[^3]。 --- ##### (2) 利用 `scale-color()` Sass 中引入了一个新的函数 `scale-color()`，它可以按比例缩放颜色的不同维度（如色调、饱和度和亮度）。这使得我们可以更灵活地控制颜色变化的程度。 ```scss $base-color: rgb(0, 128, 255); $brighter-color: scale-color($base-color, $lightness: +20%); ``` 在这里，我们将 `$base-color` 的亮度增加了 20%，从而实现了类似 `lighten()` 的行为[^4]。 --- ##### (3) 自定义 Mixin 实现渐变逻辑 如果项目中有大量地方需要调用类似 `lighten()` 的功能，则可以创建自定义 mixin 来封装这一逻辑。这样不仅能够简化代码维护工作量，还能确保一致性。 ```scss @mixin adjust-lightness($color, $percentage) { @if type-of($color) != color or unitless($percentage) == false { @error "`adjust-lightness` only accepts valid colors and percentages."; } $hsl-values: convert-to-hsl($color); $new-lightness: clamp(0%, ($hsl-values[3] * 1%) + ($percentage), 100%); @return hsl($hsl-values[1], $hsl-values[2], $new-lightness); } // 示例用法 .brightened-box { background-color: @include adjust-lightness(blue, 30%); } ``` 上述示例演示了如何构建一个通用的方法来改变任意给定颜色的亮度级别[^5]。 --- #### 4. 注意事项 在实施迁移计划之前，请务必确认团队内部所有成员都已充分理解新旧 API 差异之处；另外还需要测试现有样式表是否存在兼容性问题。最后提醒一点：尽管目前仍支持旧版语法，但从长远来看尽早完成升级转换才是明智之举[^6]。 --- ###