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

Less and CSS Calc() Properties: Hindering Aggressive Compilation

Less compilers, such as OrangeBits and dotless, may attempt to compile and evaluate CSS calc() properties, leading to incorrect results. This article explores ways to prevent this behavior and maintain desired CSS styles.

Less's Default Behavior

Less used to proactively evaluate expressions within calc(), resulting in erroneous outcomes. For instance, body { width: calc(100% - 250px - 1.5em); } would be incorrectly translated to body { width: calc(-151.5%); }.

Solution for Less

Do this:

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

By using the ~ operator, you signal to Less to ignore the expression during compilation.

Solution for Less v3.00 and Later

Less no longer automatically evaluates expressions within calc() by default. Therefore, for Less v3.00 and later, no specific actions are necessary to prevent aggressive compilation.

Strict Maths Option

In Less 1.4.0, there is a strictMaths option that requires all Less calculations to be enclosed in brackets. This option ensures that calc() will work as intended without any modifications. By default, this option is turned off in the release version of Less 1.4.0.

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