问题 LESS中字符串内的多个函数

我问了一个类似的问题前一段时间，收到了很好的答案。不幸的是，这一次答案是不够的，问题稍微复杂一些。

我在用减随着 LESSHat mixins目前正在构建一个主题。我已经定义了许多颜色作为变量，我目前正在尝试使用LESSHat来定义渐变 .gradient() 混入。问题是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%)");

这应该工作，这就像你的第一种方法，但你也应该包括 ~：

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

您是否尝试先将变暗的颜色保存到变量中？喜欢这个：

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

我相信“正确的方式来包括回归 darken() 字符串中的函数“是不要（也就是说，我不相信LESS功能可以目前被包括在一个字符串和工作;没有“函数插值”）。 - ScottS

嗯，这似乎不起作用。例如： .gradient(~"linear-gradient(top, @{green} 0%, " darken(@green, 10%) ~" 100%)"); 编译成 linear-gradient(top, #77cc33 0%, , #5fa329, 100%); 注意错误的逗号...... - BenM

@BenM：只是一个FYI，这必然是LESSHat mixin本身的一个问题（它与字符串值有关），因为纯粹从形成字符串的角度来看，额外的逗号不显示。我认为这基本上是获得你想要的东西的正确方法（即使它在技术上不是在字符串中使用函数）。 - ScottS

@ScottS感谢您的评论。我调查了这个问题，看起来你很正确。问题在于LESSHat的mixin，而不是Lipis提供的解决方案。 - BenM

是的，当然有效。但请参阅问题中的单独注释：有没有人知道在上面的字符串中包含darken（）函数返回的正确方法，没有创建单独的变量为了那个原因？ - BenM

问题 LESS中字符串内的多个函数

答案:

热门问题