css - 有没有办法在 Less 中为 ~ 运算符使用变量，比如 ~"calc(100% - @spacing)"；

Question

有没有办法在 less ~ 运算符中使用变量，比如

~"calc(70% - @spacing)";

当我尝试过它时，它只适用于像这样的静态值

 ~"calc(70% - 10px)";

我能否在设置为属性之前获取要评估的字符串？

Answer 1

要禁用 LESS 在发现两个数值之间的 - 时自动执行的计算但仍然能够使用变量，您可以编写以下内容之一:

1) 只对触发计算的运算符进行转义，并像往常一样使用变量

@padding: 20px;
body {
    padding: calc(100% ~"-" @padding);
}

2) 转义整个表达式并使用@{padding} 符号插入变量

@padding: 20px;
body {
    padding: ~"calc(100% - @{padding})";
}

我更喜欢第二个版本，因为它类似于 javascript's template literals看起来更干净一些，但无论哪种方式都可以。

两种解决方案都禁用自动 Less 计算并编译为正确的结果:

body {
  padding: calc(100% - 20px);
}