Search code examples
csslesscss-calc

The calc routine using less

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?

Solution

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