Cancelamento de operações matemáticas no LESS

Às vezes, há situações em que temos uma operação matemática que não deve ser interpretada pelo LESS como um comando para cálculo. Por exemplo, esse problema surge na função CSS calc:

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

Felizmente, o LESS é capaz de processar corretamente esses casos e não realizará o cálculo durante a compilação.

No entanto, há situações em que uma expressão que não requer cálculo está em outro local, por exemplo, em uma variável, assim:

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

Nesse caso, o resultado do cálculo será armazenado na variável, e o calc receberá a variável com o valor calculado. Para evitar que isso aconteça, podemos indicar explicitamente que a expressão deve permanecer inalterada.

Para fazer isso, a expressão precisa ser colocada entre aspas e precedida pelo símbolo til:

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