Question

我正在构建一个LESS文件，其中包含通过我们的项目使用的颜色变量列表。大多数这些颜色都是简单的颜色（红色，蓝色......），但我希望它们中的一些能够自动＆＃34;计算＆＃34;从其他颜色。例如，我已经制作了一个mixin来自动创建一个突出的颜色＃34;从另一种颜色。在LESS文档之后，我＆＃34;模拟＆＃34;通过在mixin中定义一个新变量来返回值，以便我可以在下一步使用它。

.stand-out-color(@baseColor, @rate) when (lightness(@baseColor) >= 50%) {
  @standOutColor: darken(@baseColor, @rate);
}
.stand-out-color(@baseColor, @rate) when (lightness(@baseColor) < 50%) {
  @standOutColor: lighten(@baseColor, @rate);
}

.stand-out-color(red, 10%);
@my-first-color: @standOutColor; // A slightly different red, perfect

.stand-out-color(blue, 10%);
@my-second-color: @standOutColor; // The same slightly different red, not the blue I expected

不幸的是，返回值是在第一次调用之后写入的，之后从未更改过。在再次阅读文档之后，我得到了这一部分：＆＃34;只有一个例外，如果调用者包含一个具有相同名称的变量（包括由另一个mixin调用定义的变量），则不会复制变量。＆＃34;

所以它应该工作，但我不知道如何实现我想要的，这是一个我可以在同一范围内不止一次调用的函数。由于我定义了一个全局变量列表，我不认为我可以使用范围来避免这种行为。 还有其他方法可以实现这一目标吗？

Answer 1

这是解决方案，感谢七个阶段 - 最多对我的问题的评论。它解决了我的初始问题，即我需要根据另一个变量计算稍暗/较浅的颜色变量。

LESS的contrast功能解决了我的问题，让我根据颜色是否暗示指定要采用哪种颜色＆＃34;黑暗＆＃34;或＆＃34;光＆＃34;。

应用于我的例子：

@my-first-color: contrast(@original-color, darken(@original-color, 10%), lighten(@original-color, 10%));

在同一范围内调用带有两次返回值的mixin

1 个答案: