lessphp

lessphp copied to clipboard

When using the calc method from CSS3, the less compiler changes my format.

height: calc(100% - 18px);

will become

height: calc(82%);

which is not what I want. I expect the value inside the calc brackets to remain as given. Any workaround?

if you want to use the CSS3 calc instead of the less math computation, you have to escape the value. Otherwise, the math operation is done by less:

height: ~"calc(100% - 18px)"

Looks like there was a long-running conversation about this on less.js: https://github.com/less/less.js/issues/974

This just isn’t right. When I first got hit by the problem I did a search and read that StrictMath would solve the problem. I did and I thought the problem was solved—until today. I looked at the code in the debugger and found that the @ rule was left intact but the actual calc() call was mangled. Even if escaping were strictly mandatory it should at least always mangle calcs so that we don’t get random errors.