Sass颜色变亮/变暗功能答案

【问题标题】：Sass color lighten/darken functionSass颜色变亮/变暗功能
【发布时间】：2020-04-04 11:50:22
【问题描述】：

所以我无法理解 sass lighten/darken color function.

我知道它改变了hue/saturation/lightness，但是我怎么知道使用这个函数后 hex 的值是多少？

lighten/darken 的输出颜色是什么？

【问题讨论】：

您的问题范围很广，请提供更多详细信息。你的设计规范是什么样的？你在颜色功能中插入了什么？您期望的预期结果是什么？
所以我得到了 adobe xd 设计规范，在那里我可以看到颜色列表（十六进制值），但设计规范中的某些元素的颜色（同样是十六进制）不是来自该列表。当我使用变亮功能和不同的百分比时，我发现它是被变亮的原色。所以我想要的不是引入许多颜色，而是定义更少的颜色，而是使用变亮/变暗功能来获得其他所需的颜色。
好的，所以您有一个十六进制基色（原色），并且您想通过应用 HSL（主要是 L）来导出某些其他十六进制颜色（原色的子色）以获得已知的子色（十六进制) 在您的规格中，对吗？而且您没有需要申请的 L 数量来获取子颜色十六进制值，对吧？
@mahatmanich 这正是我所需要的 :)
你对比过主色和副色的HSL值吗？例如。在这里插入两种十六进制颜色：serennu.com/colour/hsltorgb.php？只有L在变化吗？如果只有 L 发生变化，我想您可以安全地使用具有不同 L 的原色，但如果 HS 不同，那么我会将该颜色保存为不同的十六进制，因为它是不同的颜色而不是原色的衍生物.

标签： css sass

【解决方案1】：

Lighten 和 Darken 函数正在使用新的模块系统在 Sass 中被弃用。它们没有以预期的方式缩放颜色，建议现在远离它们。现在应该使用带有 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-modules/

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

【讨论】：

【解决方案2】：

相信你在找@debug看输出的最终值！

https://sass-lang.com/documentation/at-rules/debug

【讨论】：

这是否意味着我每次都需要调试以确定百分比应该是多少？因为我有一个设计规范，我需要一个特定的十六进制值......
您的设计规范使用什么？ RGB HSL 或 HEX，或它们的组合？ serennu.com/colour/hsltorgb.php 计算所有这些取决于彼此...