Sass 颜色变亮/变暗功能

Question

所以我无法理解 sass lighten/darke n color 函数。

我知道它会改变hue//但是我如何知道使用此函数后的十六进制值saturation是多少lightness？

lighten/darke n的输出颜色是什么？

Answer 1

新模块系统在 Sass 中已弃用 Lighten 和 Darken 函数。它们没有以预期的方式缩放颜色，建议现在远离它们。您现在应该使用带有 color.adjust() 的 sass:color 模块。

在最近的模块更新之前，我使用了自己的函数，如下所示：

/// Incrementally lighten a color in a more effective way than with lighten()
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - Percentage of white in the returned color
/// @return {Color} - The lightened color
@function tint($color, $percentage) {
  @return mix(#fff, $color, $percentage);
}

/// Incrementally darken a color in a more effective way than with darken()
/// @param {Color} $color - Color to shade
/// @param {Number} $percentage - Percentage of black in the returned color
/// @return {Color} - The darkened color
@function shade($color, $percentage) {
  @return mix(#000, $color, $percentage);
}

不过现在推荐使用颜色模块。有关颜色模块的信息位于： https: //sass-lang.com/documentation/modules/color，有关新模块系统的入门知识可在此处找到： https: //css-tricks.com/introducing-sass-模块/

使用颜色模块中的函数将提供更多预期和可预测的输出，但是如果您需要知道输出颜色的确切十六进制代码，您可以在头脑中弄清楚如何计算它，或者可以使用 @debug 功能( https://sass-lang.com/documentation/at-rules/debug ) 或在代码片段上使用实时编译器。