SASS计算两种颜色之间的HSL差异

Question

我正在使用SASS进行一些样式设计，我有一个基础颜色，并希望所有其他颜色相对于基础颜色改变。我已经按照自己的意愿设置了颜色，但是颜色是硬编码的，而不是从基础颜色计算得出的。

有没有工具可以快速生成两种颜色之间的SASS颜色函数？有这个工具：http://sassme.arc90.com/，但它只允许我使用滑块生成输出颜色，而不能自己设置输出颜色并生成函数。

希望这样说清楚了。

- Wasim

Answer 1

您可以查看以下资源:

使用SASS构建颜色调色板

基本上，这是其核心内容:

@function color-diff($a, $b) {
  $sat: saturation($a) - saturation($b);
  $lig: lightness($a) - lightness($b);
  $fn-sat: if($sat > 0, 'desaturate', 'saturate');
  $fn-lig: if($lig > 0, 'darken', 'lighten');
 
  @return (
    adjust-hue: -(hue($a) - hue($b)),
    #{$fn-sat}: abs($sat),
    #{$fn-lig}: abs($lig)
  );
}

你可以使用SASS中的函数（或LESS中的参数化mixin）来实现这一点，并且你可以在上面看到其中的结构。

希望这能有所帮助。

- Josh Burgess