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

Question

我正在使用 SASS 进行一些样式设置。我有一个基色，我希望所有其他颜色都相对于基色发生变化。我已经按照我想要的方式设置了颜色，但是颜色是硬编码的，而不是根据基色计算的。

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

希望这是有道理的。

Answer 1

您可以查看以下资源：

Building Color Palettes with 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）来做到这一点，你可以看到上面一个的结构。

希望这会有所帮助。