Disable LESS-CSS Overwriting calc() [duplicate]

Question

Right Now I'm trying to do this in CSS3 in my LESS code:

width: calc(100% - 200px); 

However, when LESS compiles it is outputting this:

width: calc(-100%); 

Is there a way to tell LESS not to compile it in that manner and to output it normally?

Answer 1

Using an escaped string (a.k.a. escaped value):

width: ~"calc(100% - 200px)"; 

---

Also, in case you need to mix Less math with escaped strings:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em"); 

Compiles to:

width: calc(100% - 15rem + 15px + 2em); 

This works as Less concatenates values (the escaped strings and math result) with a space by default.