How can I instruct less to ignore math for certain styles?

Question

I'm using the new calc function in CSS to get the width for an object, as in:

width: calc(100% - 40px);

Unfortunately, since this is in a LESS file, LESS is "helpfully" pre-converting this to 60% during compile time.

I want less to ignore math when it's in a calc function since I need the browser to do this calculation, not less.

Is there anyway I can make LESS ignore this calculation so I can pass it straight to the browser?

Answer 1

Use it through an escaped string:

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

Which outputs purely as CSS:

width: calc(100% - 40px);

Instead of precalculating width: calc(60%) (as you are experiencing).

NOTE: LESS 1.4+ does not need this escaped string if the strict-math mode is set, as all "math" then requires its own parenthesis to trigger. So LESS 1.4+ in that mode could be used as you originally had it, and if you wanted it to do the math, it would need extra parentheses and a unit() function like so: width: calc((100% - unit(40px)));.