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?
5 Answers
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.