Less CSS3 calc function becomes invalid

Question

I have following code in my LESS file,

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

In my Localhost environment, it works fine and becomes as below in the generated CSS file.

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

However in my Dev-server end. It becomes as below(-becomes ties to the value) hence that makes the expression invalid in the browser.

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

I tried many ways to overcome this problem by sending this as a String or Mathematical expression to no use. Some of the things I tried are below

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

I tried so many numbers of ways all resulted in an invalid expression at the server (localhost works) Any Ideas on how to fix this issue?

What are you using to compile your LESS? Why don't you compile locally and then send the SCSS/CSS to your dev environment? — disinfor, May 13 '20 at 02:26
https://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc — XuWang, May 13 '20 at 02:36
@Seven i think he has indicated those solutions don't work, see below what he has tried — mahen3d, May 13 '20 at 02:38

Johannes · Answer 1 · 2020-09-03T15:20:31.977

2

In LESS, you have to escape calc this way: margin-left: ~'calc(50% - 50vw)';. This works, I've used it many times. If that doesn't work, the problem must be something else.

edited Sep 03 '20 at 15:20

answered May 15 '20 at 00:26

Johannes

64,305
18
73
130

score 1 · Accepted Answer · answered May 15 '20 at 00:22

This is an issue with the "MVC Bundling", This appears fixed in newer versions of MVC. Updated 4 to 5.2.7 However for older versions,

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

You should rewrite it as:

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

Less CSS3 calc function becomes invalid

2 Answers2