Variable calculations inside calc() not calculated.

[calvinjuarez]

Test Case

@a: 10px;
@b: 10px;

.one {
	width: calc(100% - ((@a + @b)));
}

Expected Output (& Output for v2.7.1)

.one {
  width: calc(100% - 20px);
}

Actual Output (lessc v 3.0.4)

(Command: lessc -sm=on test.less > test.css)

.one {
  width: calc(100% - 10px + 10px);
}

[matthew-dean]

Closing as duplicate of #3191.

[matthew-dean]

So, I slightly misunderstood this, but it's working as expected. Essentially, the calc() bug was recently fixed and no math is performed within calc(). But functions within calc() will still perform math on their arguments (unless the inner function is also calc).

Meaning, you can hack 2.x behavior with:

.one {
	width: calc(100% - (min(@a + @b)));
}

But there's no need, since the calculated result is the same.

[calvinjuarez]

So the v2.7 output was incorrect?

If so, what's the expectation for this?

@bar: 10px;
@baz: 10px;

.foo {
  @_calculation: (@bar + @baz);
  width: calc(100% - @_calculation);
}

[matthew-dean]

If so, what's the expectation for this?

The above will/should produce

.foo {
  width: calc(100% - 20px);
}

In other words, variables can be evaluated in calc(), but the resulting expression won't be. When you write width: calc(100% - ((@a + @b)));, each of @a and @b will be evaluated, but 10px + 10px (the result) cannot be, because of the nature of calc(). It preserves those expressions.

[matthew-dean]

@calvinjuarez
One way to think about this:

@px-offset: 10px;
@vh-offset: 10vh;
width: calc(100vh - (@px-offset + @vh-offset));

The px - vh expression would normally be calculated by Less, but it's value must be untouched, as its true pixel value is only evaluated in browser.

The whole idea of calc() is essentially "I would like to define a complete math expression." Less should therefore not be allowed to alter any part of the outer-most expression. But expressions passed into Less functions can and will be evaluated, as will the evaluated expressions assigned to a variable value.

[calvinjuarez]

Aight, I can dig that.

The above will/should produce...

Unfortunately that's not what's output at the moment. I created a new issue for that one (#3235).

[mikejf-pr]

@matthew-dean I'm troubled by the lack of evaluation even for negative variables, as that's not really something that can be properly handled at the moment. If we have a simple

@a: -4px;
div {
	margin-right: calc(0px - @a);
}

the resultant output is

div {
  margin-right: calc(0px - -4px);
}

It would seem to me that LESS should handle signage flips as part of the variable insertion.