Annullamento delle operazioni matematiche in LESS

A volte si verificano situazioni in cui abbiamo un'operazione matematica che non dovrebbe essere interpretata da LESS come un comando da calcolare. Ad esempio, questo problema si presenta con la funzione CSS calc:

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

Fortunatamente, LESS è in grado di elaborare correttamente questi casi e non eseguirà il calcolo durante la compilazione.

Tuttavia, a volte capita che un'espressione che non richiede calcolo si trovi in un altro posto, ad esempio in una variabile, in questo modo:

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

In questo caso, nella variabile verrà memorizzato il risultato del calcolo, e in calc verrà passata la variabile con il valore calcolato. Per evitare che ciò accada, possiamo indicare esplicitamente che l'espressione deve rimanere inalterata.

Per farlo, è necessario racchiudere l'espressione tra virgolette e anteporre il simbolo della tilde:

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

Correggi il codice in modo che funzioni correttamente:

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

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