11

不久前我问了一个类似的问题，并得到了很好的答案。不幸的是，这一次的答案是不够的，而且问题稍微复杂一些。

我目前正在使用LESS和LESSHat混合来构建主题。我已经将许多颜色定义为变量，目前正在尝试使用 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%)");
4

2 回答 2

11

这应该可行，就像您的第一种方法一样，但您还应该包括~：

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, " darken(@green, 10%) ~" 50%, " darken(@green, 10%) ~" 100%)");
于 2013-04-16T16:41:00.050 回答
3

您是否尝试过先将变暗的颜色保存到变量中？像这样：

@darkened-green: darken(@green, 10%);
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, @{darkened-green} 50%, @{darkened-green} 100%)");
于 2013-04-16T13:47:45.340 回答