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

Question

我有以下内容

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

linear-gradient如下

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

这个模型似乎适用于很多类似的案例，所以我认为它不会失效。事实上，由于它们是用空格分隔的(而不是逗号分隔的)，因此也不需要末尾的额外分号。 (仅当逗号分隔值应被视为单个参数时才需要分号。这是因为分号或逗号均可用作混合参数分隔符，但当出现分号时，逗号不再被视为分隔符。)

---

但我仍然建议做类似下面的事情，因为它看起来更具可读性和清晰度。

.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 有多个其他参数时，它会将所有参数连接成一个单独的空格值(value)。