Cancelación de operaciones matemáticas en LESS

A veces hay situaciones en las que tenemos alguna operación matemática que no debe ser interpretada por LESS como un comando para calcular. Por ejemplo, este problema surge en la función CSS calc:

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

Afortunadamente, LESS puede manejar correctamente estos casos y no realizará el cálculo durante la compilación.

Sin embargo, hay situaciones en las que una expresión que no requiere cálculo se encuentra en otro lugar, por ejemplo, en una variable, así:

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

En este caso, el resultado del cálculo se guardará en la variable, y a calc se enviará la variable con el valor calculado. Para evitar que esto suceda, podemos indicar explícitamente que la expresión debe permanecer sin cambios.

Para ello, la expresión debe ponerse entre comillas y precederse con el signo tilde:

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

Corrija el código para que funcione de forma correcta:

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

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