Undoing Math Operations in LESS

Sometimes there are situations when we have some mathematical operation that should not be accepted by LESS as a calculation command. For example, such a problem occurs in the CSS function calc:

div {
	width: calc(100% - 10px);
}

Fortunately, LESS can handle such places correctly and will not perform the calculation at compile time.

There are, however, situations where an expression that does not require evaluation is located elsewhere, for example in a variable, like this:

@exp: 100% - 10px;
div {
	width: calc(@exp);
}

In this case, the result of the calculation will be written to the variable, and the variable with the calculated value will be sent to calc. To prevent this from happening, we can explicitly indicate that the expression should remain unchanged.

To do this, you need to put the expression in quotation marks and put a tilde sign in front of it:

@exp: ~'100% - 10px';
div {
	width: calc(@exp);
}

Correct the code so that it works correctly:

@exp1: 80% + 10px;
@exp2: 30vh - 10px;

div {
	width: calc(@exp1);
	margin-top: calc(@exp2);
}