css - 如何转义Less中的内置函数？

Question

我有以下内容

.linear-gradient(~"to left, #83111b 0, #83111b 50%, lighten(#83111b, 5%) 50%, lighten(#83111b, 5%) 100%");

线性渐变如下

.linear-gradient(@params) {
    background-image: linear-gradient(@params);
    background-image: -webkit-linear-gradient(@params);
    background-image: -moz-linear-gradient(@params);
}

是否有可能逃脱lighten(#83111b, 5%)？ 我知道我可以使用变量来存储它，但我喜欢避免这部分。

Answer 1

不，您不能在转义字符串中调用内置函数，因为这样它会被视为单个字符串，因此该函数不会被调用/计算。

令人惊讶的是，似乎不需要临时变量，并且类似下面的内容适用于这种特殊情况。 Less 编译器似乎将整个事物连接起来并将其视为单个参数。

.linear-gradient(@params) {
  background-image: linear-gradient(@params);
  background-image: -webkit-linear-gradient(@params);
  background-image: -moz-linear-gradient(@params);
}
a{
  .linear-gradient(~"to left, #83111b 0, #83111b 50%," lighten(#83111b, 5%) ~"50%," lighten(#83111b, 5%) ~"100%");
}

这个模型似乎在很多类似的情况下工作得很好，所以我认为它不会失效。事实上，由于它们是空格分隔的(而不是逗号分隔的)，所以末尾额外的分号也不是必需的。 (仅当逗号分隔值应被视为单个参数时才需要分号。这是因为分号或逗号都可以用作 mixin 参数分隔符，但当存在分号时，逗号不再被视为分隔符。)

---

但我仍然建议执行如下操作，因为它看起来更具可读性和清晰性。

.linear-gradient(@params) {
  background-image: linear-gradient(@params);
  background-image: -webkit-linear-gradient(@params);
  background-image: -moz-linear-gradient(@params);
}

a{
  @color1: lighten(#83111b, 5%);
  .linear-gradient(~"to left, #83111b 0, #83111b 50%, @{color1} 50%, @{color1} 100%");
}

Qwertiy 建议的选项也是一个非常好的选项，但要小心 @arguments 选项，因为当同一个 mixin 有多个其他参数时，它会将所有参数连接到一个分隔的空格中值。