REJH REJH - 2 months ago 13
Less Question

Less css: 'calc(x+y)' outputs 'calc(z)' instead of just 'z'

I have the following css rule:

@somevar = 8px
.someclass { width: calc(8px + @somevar); }


After processing (lessc 2.7.1) it outputs:

.someclass { width: calc(16px); }


But the 'calc()' operation is ignored by older browsers and it's obviously not needed here because there is nothing to be calculated.

So how do I get it to output

.someclass { width: 16px; }

Answer

If you don't want calc to appear in your output, don't include it in the input.

As pointed out in comments, calc is not needed for the less compiler, it's a css function.

So this will work:

.someclass { width: 16px + @somevar; }

outputs:

.someclass { width: 32px; }