css - ~"calc(100% - @spacing)"; のように ~ 演算子に Less で変数を使用する方法はありますか?

Question

次のように、少ない~演算子で変数を使用する方法はありますか

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

私が試したところ、次のような静的な値でのみ機能します

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

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

Answer 1

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

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

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

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

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

javascript のテンプレート リテラルに似ていて、見た目が少しきれいなので、私は 2 番目のバージョンを好みますが、どちらの方法でも問題なく動作します。

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

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