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

本文介绍了SASS计算HSL两种颜色之间的差异的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用SASS作为样式。我有一个基本颜色，我想要所有其他颜色相对于基本颜色更改。我已经设置了颜色我想要他们，但颜色是硬编码，而不是从基本颜色计算。

I'm using SASS for some styling. I have a base colour, and I want all other colours to change relative to the base colour. I have set the colours up how I want them but the colours are hard coded and not calculated from the base colour.

有没有快速生成SASS颜色函数的工具，用于两种颜色之间的差异？有这个工具： sassme.arc90/ - 但它只允许我生成输出颜色与滑块，而不是自己设置输出颜色，并生成函数。

Is there a tool that quickly generates SASS colour functions for the difference between two colours? There is this tool: sassme.arc90/ - but it only allows me to generate the output colour with sliders, instead of setting output colour myself and it generate the function.

希望这有意义。

推荐答案

您可以查看以下资源：

基本上， / p>

Basically, here's the meat of it:

@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），您可以看到上面的结构。

You want to do this with a function in SASS (or a parameterized mixin in LESS), and you can see the structure of one above.

希望这有助于。