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

时间:2014-11-19 23:24:02

标签: css sass

我使用SASS进行一些造型。我有一个基色,我希望所有其他颜色相对于基色更改。我已根据需要设置颜色,但颜色是硬编码的,不是从基色计算的。

是否有一种工具可以快速生成两种颜色之间差异的SASS颜色功能?有这个工具:http://sassme.arc90.com/ - 但它只允许我使用滑块生成输出颜色,而不是自己设置输出颜色,它会生成函数。

希望这是有道理的。

1 个答案:

答案 0 :(得分:3)

您可以查看以下资源:

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)执行此操作,您可以看到上面的结构。

希望这有帮助。