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