How to prevent Less from trying to compile CSS calc() properties?
compilation, css, css-calc, less
Solution
Less no longer evaluates expression inside `calc` by default since `v3.00`.
Original answer (`Less v1.x...2.x`):
Do this:
body { width: calc(~"100% - 250px - 1.5em"); }
In Less 1.4.0 we will have a `strictMaths` option which requires all Less calculations to be within brackets, so the `calc` will work "out-of-the-box". This is an option since it is a major breaking change. Early betas of 1.4.0 had this option on by default. The release version has it off by default.
Problem
The Less compilers that I'm using (OrangeBits and dotless 1.3.0.5) are aggressively translating ``` body { width: calc(100% - 250px - 1.5em); } ``` into ``` body { width: calc(-151.5%); } ``` Which is obviously not desired. I'm wondering if there is a way to signal to the Less compiler to essentially ignore the attribute during compilation. I've searched through the Less documentation and both compilers' documentation, and I could not find anything. Does Less or a Less compiler support this? If not, is there a CSS extender that does?