LESS 在color operations 中非常强大，在您的情况下，我特别建议您查看difference()、exclusion()、negation() 或average() 等混合功能。其中一些可能已经为您提供了所需的效果。
但您也可以在 LESS 中执行十六进制颜色的加法和减法。
要获得十六进制颜色的差异，您只需减去两种颜色即可：
color-diff: (#333 - #222);
这将以十六进制返回每个通道的差异：
color-diff: #111111;
所以要获得比@x“更高”的#111 的颜色，您只需要这样做
new-color: (@x + #111);
但正如您可以想象的那样，使用十六进制颜色的东西并没有那么简单。让我们看看你的第一个例子：
// @s1-color-main - @s1-color-ts1
diff: (#2DAEBF - #0092b3);
返回
diff: #2d1c0c;
所以（因为您的基色/主色是具有较高值的颜色）我们可以通过从主色中减去返回的 diff 来计算 @s1-color-ts1
(@s1-color-main - #2d1c0c)
但是正如你所看到的，现在的问题是我们需要知道哪种颜色具有更高的值才能选择正确的操作......这可能会有点混乱。
幸运的是，LESS 非常聪明......对于保存在 变量中的计算颜色，LESS 会记住实际的颜色值差异（包括符号，即它们是负数还是正数）。
举个很简单的例子
@diff1: (#222 - #333);
@diff2: (#eee + #eee);
如果我们返回差异的计算值
color1: @diff1;
color2: @diff2;
我们得到
color1: #000000;
color2: #ffffff;
返回时（在 CSS 中），所有负值在0 处被截断，大于FF 的值在FF 处被截断。但是，如果我们在进一步的操作中使用这些变量，我们会发现 @diff1 实际上拥有类似于 -17 -17 -17 的 RGB（每个 RGB 颜色分量的负值），而@diff2 拥有 @ 的 RGB 等价物987654349@，如果我们做类似的事情就会很明显
color3: (#888888 + @diff1);
color4: (@diff2 / 2);
得到
color3: #777777;
color4: #eeeeee;
那么，您如何利用它来发挥自己的优势呢？现在你可以做类似的事情
@s1-color-diff1: (#0092b3 - #2DAEBF); // which saves negative color values
并使用此变量计算@s1-color-ts1，将其添加到主颜色中
@s1-color-ts1: @s1-color-main + @s1-color-diff1;
你也可以保存整个差异列表，像这样
@diffs: (#0092b3 - #2DAEBF),
(#0087a6 - #2DAEBF),
(#008099 - #2DAEBF),
(#00758c - #2DAEBF),
(#555555 - #2DAEBF),
(#006073 - #2DAEBF),
(#005566 - #2DAEBF);
并在需要时访问它们
@s1-color-ts2: @s1-color-main + extract(@diffs,2);
这样 LESS 会处理计算中的所有 RGB 值，而您只需要处理十六进制代码。但是 LESS 通过使用颜色分量函数（例如 RGB 函数 red()、green()、blue() 和 rgb()）为您提供了更好的颜色控制。这使您可以精确调整每个 RGB 颜色分量/通道。因此，要弄清楚颜色的实际 RGB 差异是什么，您可以执行类似的操作（通过提取 RGB 组件/通道，将它们与主颜色进行比较并整齐地显示它们）
.rgb-diff(@v,@m){
@t: @@v;
@rm: red(@m); @gm: green(@m); @bm: blue(@m);
@r: (red(@t) - @rm);
@g: (green(@t) - @gm);
@b: (blue(@t) - @bm);
@{v}: @r @g @b;
}
rgb-diff {
.rgb-diff(s1-color-ts1, @s1-color-main);
.rgb-diff(s1-color-ts2, @s1-color-main);
.rgb-diff(s1-color-ts3, @s1-color-main);
.rgb-diff(s1-color-ts4, @s1-color-main);
.rgb-diff(s1-color-ts5, @s1-color-main);
.rgb-diff(s1-color-ts6, @s1-color-main);
.rgb-diff(s1-color-ts7, @s1-color-main);
}
应该返回这个
rgb-diff {
s1-color-ts1: -45 -28 -12;
s1-color-ts2: -45 -39 -25;
s1-color-ts3: -45 -46 -38;
s1-color-ts4: -45 -57 -51;
s1-color-ts5: 40 -89 -106;
s1-color-ts6: -45 -78 -76;
s1-color-ts7: -45 -89 -89;
}
现在你可以使用这样的东西了
rgb((@r-main + @r), (@g-main + @g), (@b-main + @b));
通过将它们的 RGB 差异添加到主/基色的 RGB 值来重构各个颜色。
测试：
.from-rgb(@r,@g,@b,@v,@m){
@rm: red(@m); @gm: green(@m); @bm: blue(@m);
@{v}: rgb((@rm + @r), (@gm + @g), (@bm + @b));
}
from-rgb {
.from-rgb(-45, -28, -12, s1-color-ts1, @s1-color-main);
.from-rgb(-45, -39, -25, s1-color-ts2, @s1-color-main);
.from-rgb(-45, -46, -38, s1-color-ts3, @s1-color-main);
.from-rgb(-45, -57, -51, s1-color-ts4, @s1-color-main);
.from-rgb(40, -89, -106, s1-color-ts5, @s1-color-main);
.from-rgb(-45, -78, -76, s1-color-ts6, @s1-color-main);
.from-rgb(-45, -89, -89, s1-color-ts7, @s1-color-main);
}
应该返回您上面的一组十六进制颜色，您现在可以通过简单地调整基础颜色变量@s1-color-main来调整所有这些颜色。