css - less を使用した calc ルーチン

Question

less を使用して css calc() ルーチンを使用する方法はありますか?

http://less2css.org/にアクセスし て、次の入力を入力すると (これは単なる通常の CSS ルールです):

width: calc(100% - 450px);

ただし、出力はまったく同じはずです (通常の css であるため)。

less コンパイラが生成している css 出力はwidth: calc(-350%);

これを機能させる方法はありますか？

Answer 1

値をエスケープします。

width: ~"calc(100% - 450px)";

ただし、LESS 1.4 では、計算が括弧で囲まれている場合にのみ計算が行われるため、エスケープは不要です。例えば：

prop: 20 + 10px;    ->  prop: 20 + 10px;
prop: (2 + 10px);   ->  prop: 12px;
prop: func(1 + 2);  ->  prop: func(1 + 2);
prop: func((1 + 2));->  prop: func(3);