Question

我刚才问similar question这个问题，得到了很好的答案。不幸的是，这一次答案是不够的，问题稍微复杂一些。

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

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

上面的一切都很好，我可以使用String Interpolation（即@{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%)");

LESS中字符串内的多个函数

2 个答案: