字符串中的多个函数

Question

我前段时间问了一个similar question，得到了一个很好的回答。不幸的是，这一次答案还不够充分，问题稍微复杂一些。

目前，我正在使用带有LESSHat mixins的LESS来构建主题。我已经定义了一些颜色作为变量，目前正在尝试使用LESSHat的.gradient() mixin定义渐变。问题是，mixin接受一个字符串作为单个参数，而不是每个渐变参数的一系列参数，例如：

#element {
    .gradient(~"linear-gradient(90deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)");
}

上面的一切都很好，我可以通过字符串插值(即@{color-var})在字符串中使用我的变量。但是，我也想在变量上运行一些函数，如下所示：

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, darken(@green, 10%) 50%, darken(@green, 10%) 100%)");

问题是darken(@green, 10%)从来没有编译过，一些浏览器只是将这种颜色解释为green。有没有人知道在上面的字符串中包含darken()函数的返回值的正确方法，而不是为它创建一个单独的变量？

作为参考，我尝试了以下几种方法，但都无济于事：

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, "darken(@green, 10%)" 50%, "darken(@green, 10%)" 100%)");
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, {darken(@{green}, 10%)} 50%, {darken(@{green}, 10%)} 100%)");

Answer 1

这应该是可行的，它与您的第一种方法类似，但是您还应该包含~

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, " darken(@green, 10%) ~" 50%, " darken(@green, 10%) ~" 100%)");

Answer 2

你有没有试过先把变暗的颜色保存到一个变量中？如下所示：

@darkened-green: darken(@green, 10%);
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, @{darkened-green} 50%, @{darkened-green} 100%)");