〜 "calc（100％-@spacing）"のように、〜演算子にLessで変数を使用する方法はありますか？

Question

以下のような~演算子で変数を使用する方法はありますか

~"calc(70% - @spacing)";

私がそれを試したとき、それは次のような静的な値でのみ動作します

 ~"calc(70% - 10px)";

プロパティとして設定する前に評価する文字列を取得できますか。

Answer 1

2つの数値間の-を検出したときにLESSが自動的に実行する計算を無効にするには、変数を使用できるようにするには、次のいずれかを記述できます。

1）計算をトリガーする演算子のみをエスケープし、通常のように変数を使用します

@padding: 20px;
body {
    padding: calc(100% ~"-" @padding);
}

2）式全体をエスケープし、@{padding}表記で変数を補間します

@padding: 20px;
body {
    padding: ~"calc(100% - @{padding})";
}

javascriptのテンプレートリテラル に似ており、少しきれいに見えるので、私は2番目のバージョンを好みますが、どちらの方法でもうまく機能します。

両方のソリューションは、自動Less計算を無効にし、正しい結果にコンパイルします。

body {
  padding: calc(100% - 20px);
}