How Can I Prevent LESS CSS from Modifying `calc()` Expressions?

Overcoming LESS CSS Calc() Compilation Issue

In an attempt to utilize calc() within LESS code, developers may encounter an issue where the LESS compiler alters the calculation, resulting in incorrect output. For instance, the following code:

width: calc(100% - 200px);

renders as:

width: calc(-100%);

To resolve this, one can employ escaped strings within LESS. This approach allows the calc() expression to be treated as a string, preventing the compiler from manipulating it.

width: ~"calc(100% - 200px)";

This ensures that the final output remains consistent with the original code. Additionally, it is possible to combine Less math with escaped strings, as demonstrated below:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

This will compile to:

width: calc(100% - 15rem + 15px + 2em);

Less concatenates values with a space by default, enabling the seamless integration of escaped strings and calculation results. Implementing this technique effectively disables LESS's overwriting of calc() expressions.

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