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

Workaround for LESS-CSS Overwriting calc()

LESS-CSS has a tendency to modify the syntax of calc() functions, leading to unexpected output. To address this, an alternative method is required to prevent LESS from altering the syntax.

Solution: Escaped Strings

One effective solution is to use escaped strings, also known as escaped values. By using a tilde character (~) before the quotation marks, LESS interprets the content within as a literal string, preventing it from performing calculations or modifications.

For instance, if you want to output the calc(100% - 200px) without alterations, you would use the following syntax:

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

Escaped Strings with Less Math

In cases where you need to combine Less math with escaped strings, such as:

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

LESS will concatenate these values with a space by default, resulting in the desired output:

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

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