css - 带有 LESS 的字符串内的多个函数

Question

我问了一个similar question前一阵子，并收到了很好的答案。不幸的是，这一次的答案还不够充分，问题稍微复杂一些。

我正在使用 LESS与 LESSHat mixins 现在构建一个主题。我已经将许多颜色定义为变量，目前正在尝试使用 LESSHat 的 .gradient() 混合定义渐变。问题在于 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%)");