How to Prevent LESS-CSS from Overwriting the `calc()` Function?

Disabling LESS-CSS Overwriting of calc() Function

When using LESS-CSS, you may encounter a scenario where the calc() function is being overwritten upon compilation, resulting in incorrect output. To address this, there is a technique to disable this overwriting.

Solution: Escaped Strings

An effective method is to enclose the calc() function within an escaped string. An escaped string is denoted by placing a tilde (~) before and after the string. This approach effectively instructs LESS-CSS to preserve the contents of the string without any alterations.

For instance:

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

Upon compilation, this will output:

width: calc(100% - 200px);

as desired.

Additional Considerations

If you need to incorporate Less math into your escaped string, you can use a combination of escaped strings and math operations. For example:

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

This will compile to:

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

Remember, Less concatenates values (escaped strings and math results) with a space by default.

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