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

Preventing Less Compiler from Manipulating CSS calc() Properties

In an attempt to prevent Less compilers from translating CSS calc() properties into undesired values, it is important to understand their behavior. Less compilers interpret calc() expressions and perform mathematical operations, leading to unexpected results in certain scenarios.

Less Compiler Configuration

Less no longer evaluates expressions inside calc() by default since version 3.00. To prevent this transformation, ensure you are using the latest version of Less.

Option for Older Less Versions

For older versions of Less (v1.x...2.x), enclose calc() expressions within tilde (~) characters. This signals to the compiler to treat the expression as a string and prevent evaluation:

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

Less Configuration

Less 1.4.0 introduces the strictMaths option, which requires all Less calculations to be within brackets. With this option enabled, calc() expressions will work out-of-the-box without the need for tilde characters. However, note that this option may cause breaking changes in existing code.

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