How Can I Prevent Less from Incorrectly Compiling CSS `calc()` Properties?

Preventing Less Compilation of CSS calc() Properties

Less compilers often encounter issues when attempting to compile CSS properties defined using the calc() function. For example, the input:

body { width: calc(100% - 250px - 1.5em); }

may be unexpectedly translated into:

body { width: calc(-151.5%); }

This inaccurate transformation can cause undesirable results.

Solution in Less

Less versions 3.00 and above no longer evaluate expressions within calc() by default. Therefore, the input provided will not be altered during compilation.

For Less versions prior to 3.00, you can escape the calculation using the ~ operator:

body { width: calc(~"100% - 250px - 1.5em"); }

Strict Math Option in Less

Less versions 1.4.0 introduced a strictMaths option. With this option enabled, all Less calculations must be enclosed within brackets. In this case, the calculation within calc() will be respected and not evaluated during compilation. Note that this option may break existing code, so it should be used with caution.

The above is the detailed content of How Can I Prevent Less from Incorrectly Compiling CSS `calc()` Properties?. For more information, please follow other related articles on the PHP Chinese website!