Search code examples
csslesscss-calc

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?

Solution

  • 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.