少了CSS3的计算函数变得无效

Question

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

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

在我的Localhost环境下，它工作得很好，在生成的CSS文件中变成了下面的样子。

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

但是在我的Dev-server端，它变成了下面的样子（-becomes ties to the value）。它变成了下面的样子(-becomes ties to the value)，因此这使得表达式在浏览器中无效。

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

我试了很多方法，结果都是在服务器上出现了无效的表达式（localhost有效），有什么办法可以解决这个问题吗？

Answer 1

这是 "MVC捆绑 "的问题，这似乎在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)';. 这个很管用，我用过很多次了。如果这样还不行，那一定是别的问题。