Annulation des opérations mathématiques dans LESS

Il arrive parfois que nous ayons une opération mathématique qui ne doit pas être interprétée par LESS comme une commande de calcul. Par exemple, ce problème survient dans la fonction CSS calc :

styles.lessdiv {
  width: calc(100% - 10px);
}

Heureusement, LESS est capable de traiter correctement de tels endroits et n'effectuera pas le calcul lors de la compilation.

Il arrive cependant que l'expression, ne nécessitant pas de calcul, se trouve ailleurs, par exemple dans une variable, comme ceci :

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

Dans ce cas, le résultat du calcul sera enregistré dans la variable, et calc recevra la variable avec la valeur calculée. Pour éviter cela, nous pouvons indiquer explicitement que l'expression doit rester inchangée.

Pour ce faire, l'expression doit être mise entre guillemets et précédée du signe tilde :

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

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

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