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

Less Compilation Issues with CSS calc() Properties: Prevention Methods

Less compilers, such as OrangeBits and dotless, have been known to incorrectly translate CSS calc() properties. This can lead to undesired results, such as converting "calc(100% - 250px - 1.5em)" to "calc(-151.5%)".

To prevent this, Less version 3.00 onwards no longer evaluates expressions within calc() by default. This change ensures that calc() values are preserved during compilation.

For Less versions prior to 3.00:

To prevent less from translating calc equations you can use tilde notation like so:

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

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