Отмена математических операций в LESS

Иногда бывают ситуации, когда у нас есть некая математическая операция, которая не должна быть воспринята LESS как команда на вычисление. Например, такая проблема возникает в CSS функции calc:

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

К счастью, LESS умеет корректно обрабатывать такие места и не произведет вычисление при компиляции.

Бывают, однако, ситуации, когда выражение, не требующее вычисления, находится в другом месте, например, в переменной, вот так:

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

В этом случае в переменную запишется результат вычисления, и в calc отправится переменная с вычисленным значением. Чтобы такого не произошло, мы можем явно указать, что выражение должно остаться в неизменной виде.

Для этого выражение нужно взять в кавычки и поставить перед ним знак тильды:

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);
}