AJStacy AJStacy - 4 months ago 50
CSS Question

Disable LESS-CSS Overwriting calc()

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

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.

Comments