The calc routine using less [duplicate]

Question

Is there a way to use the css calc() routine using less?

If i go to http://less2css.org/ and I type the the following input (which is just a regular css rule):

width: calc(100% - 450px);

The output should be exactly the same (because it's regular css) however,

the css output which the less compiler is producing is width: calc(-350%);

Is there any way to get this working?

Answer 1

Escape the value:

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

Escaping is unnecessary in LESS 1.4 though, because calculations are only done when the calculation is surrounded by parentheses. For example:

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