CODEWITHSUNDEEP
cssless
aruni
aruni

Reputation: 2752

Less CSS3 calc function becomes invalid

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?

Upvotes: 1

Views: 357

Answers (2)

Johannes
Johannes

Reputation: 67799

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.

Upvotes: 2

mahen3d
mahen3d

Reputation: 7774

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%);

Upvotes: 1

Related Questions