有没有办法在Less中为〜运算符使用变量，例如〜"calc(100％-@spacing)"; [英] Is there a way to use variables in Less for the ~ operator, like ~"calc(100% - @spacing)";

问题描述

有没有办法在更少的~运算符中使用变量，例如

Is there a way to use variables in less ~ operator, like

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

当我尝试过时，它仅适用于静态值，例如

When I have tried it it only works with static values like

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

在将beeing设置为属性之前，可以获取要评估的字符串吗?

Can I get the string to be evaluated prior to beeing set as a property.

推荐答案

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

To disable the calculation which LESS does automatically when discovering a - between two numeric values but still being able to use variables, you can write one of the following:

1)仅像平时那样逃逸触发计算的运算符并使用变量

1) Only escape the operator that triggers the calculation and use the variable like you normally do

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

2)转义整个表达式，并用@{padding}表示法对变量进行插值

2) Escape the whole expression and interpolate the variable with the @{padding} notation

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

我更喜欢第二个版本，因为它类似于 javascript的模板文字并看上去更干净一些，但是两种方法都可以正常工作.

I prefer the second version, since it resembles javascript's template literals and looks a bit cleaner, but either way works just fine.

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

Both solutions disable the automatic Less calculation and compile to the correct result:

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

这篇关于有没有办法在Less中为〜运算符使用变量，例如〜"calc(100％-@spacing)";的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！