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
}

这里一切正常。

但是当我将纯 style.css 更改为 style.less:

style.less

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

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

如何解决这个问题？

Answer 1

LESS Documentation - String Functions - Escaping

CSS escaping, replaced with ~"value" syntax.

当你使用 LESS 时，你需要将它转义，否则数字将被计算，正如你所看到的。在这种情况下，您将使用 calc(~"100% - 40px"):

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

Unexpected effects of LESS calc() function