LESS中字符串内的多个函数

Question

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

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

#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%)");

- BenM

---

我认为“在字符串中正确包含darken()函数的返回值”的方法是_不要_这样做（也就是说，我不相信LESS函数目前可以被包含在一个字符串中并且正常工作；没有“函数内插”）。 - ScottS

Answer 1

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

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

- Lipis

---

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

@BenM：仅供参考，这必须是LESSHat mixin本身的问题（它对字符串值所做的某些操作），因为从形成字符串的角度来看，额外的逗号不会显示出来。我认为这基本上是获得您想要的内容的正确方法（即使它在技术上并没有在字符串中使用该函数）。 - ScottS

@ScottS 感谢您的评论。我调查了这个问题，似乎您是正确的。问题出在 LESSHat 的 mixin 上，而不是 Lipis 提供的解决方案。 - BenM

Answer 2

你尝试过先将暗色保存到变量中吗？像这样：

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

- Hai Nguyen

---

当然可以。不过请注意我在问题中的另一个注释：有没有人知道如何在上述字符串中包含 darken() 函数的返回值，而不需要创建单独的变量？ - BenM