有没有办法在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的模板文字并且看起来更清晰,但两种方式都可以正常工作.

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

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