How Can I Preserve `calc()` Functionality When Using LESS?

Preserving calc() Functionality in LESS

When using calc() function in LESS stylesheets, it faces compilation issues, outputting incorrect results. To resolve this, developers can utilize escaped strings, also known as escaped values.

To preserve the original calc() function, prepend it with a tilde (~) within a string, as demonstrated below:

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

This ensures that LESS interprets calc() as a plain string, preventing it from being modified during compilation.

In scenarios where you need to combine Less math with escaped strings, use the following syntax:

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

This code compiles to:

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

By utilizing escaped strings, developers can ensure that calc() functions are interpreted correctly and output as expected by LESS.

The above is the detailed content of How Can I Preserve `calc()` Functionality When Using LESS?. For more information, please follow other related articles on the PHP Chinese website!