How Can I Avoid Less Compiler Errors When Using CSS `calc()` Properties?

Less Compiler Misinterpreting CSS calc() Properties

Certain Less compilers, including OrangeBits and dotless, incorrectly convert CSS calc() expressions. For instance, the expression "width: calc(100% - 250px - 1.5em)" is mistakenly transformed into "width: calc(-151.5%)".

Solution in Less 3.00 and Later

In Less versions 3.00 and above, the compiler no longer automatically evaluates expressions within calc(). This change eliminates the need for manual intervention when using calc().

Solution in Earlier Less Versions

For Less versions below 3.00, users can prevent automatic evaluation by enclosing the calc() expression within the ~ operator. For example:

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

Additionally, Less version 1.4.0 introduced a strictMaths option, which requires all Less calculations to be enclosed in parentheses. This option ensures that calc() expressions are handled correctly by default.

The above is the detailed content of How Can I Avoid Less Compiler Errors When Using CSS `calc()` Properties?. For more information, please follow other related articles on the PHP Chinese website!