Less CSS3 计算函数失效

Question

我的 LESS 文件中有以下代码，

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

在我的本地主机环境中，它工作正常，在生成的 CSS 文件中变成如下所示。

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

但是在我的开发服务器端。它变成如下（-成为与值的关系）因此使表达式在浏览器中无效。

margin-left: calc(50%- 50vw);
margin-right: calc(50%- 50vw);

我尝试了很多方法来解决这个问题，方法是将其作为字符串或数学表达式发送，但没有用。下面是我尝试过的一些东西

margin-left: calc(~"50% - 50vw");//not working
margin-left: calc(~'50% - 50vw');//not working
margin-left: ~'calc(50% - 50vw)';//not working

margin-left: e('calc(50% - 50vw)');//not working
margin-left: calc(percentage(0.5)if((2 > 1),-, 0)if((2 > 1),50vw, 0));//not working

我尝试了很多方法都导致服务器上的表达式无效（本地主机有效）关于如何解决这个问题有什么想法吗？

Answer 1

这是 "MVC Bundling" 的问题，这似乎已在较新版本的 MVC 中得到修复。更新 4 到 5.2.7 但是对于旧版本，

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

您应该将其重写为：

margin-left: calc((-50vw) - -50%);
margin-right: calc((-50vw) - -50%);

Answer 2

在 LESS 中，你必须这样转义 calc：margin-left: ~'calc(50% - 50vw)';。这个有用，我用过很多次了。如果这不起作用，则问题一定出在其他地方。

Less CSS3 计算函数失效

Less CSS3 calc function becomes invalid

css

less