LESS calc（）函数的意外影响

Question

此代码：

index.htm.twig

<div id="myBar">Hello</div>
<div id="myDiv">{VERY_LONG_LOREM_IPSUM}</div>

纯style.css

#myBar {
    height: 40px;
}
#myDiv {
    height: calc(100% - 40px); // document height - #myBar height
}

这里一切都很好。

但是当我将pure style.css改为style.less时：

style.less

#myBar {
    height: 40px;
}
#myDiv {
    height: calc(100% - 40px); // document height - #myBar height
}

功能calc(100% - 40px);已编译为calc(60%);中的style.css。 我期望与纯style.css文件中的值相同。

如何解决此问题？

Answer 1

  

LESS Documentation - String Functions - Escaping

     

CSS转义，替换为~"value"语法。

当您使用LESS时，您需要将其转义，否则将对您的数字进行评估，如您所见。在这种情况下，您将使用calc(~"100% - 40px")：

#myDiv {
    height: calc(~"100% - 40px");
}