In less files, variables used in calc() are inserted differently than in older versions

[lncrowe]

Installed product versions

• Visual Studio: 2017 Professional
• This extension: 1.12.394

Description

When variable expressions are used in calc(), it previously put the result into the css. Now, it puts all the variables into the calc instead of the resulting value, which can change the outcome.

Steps to recreate

I have the following in my less file:

@variableA: 10px; @variableB: 20px;

.myHeight { height: calc(~"100% - " @variableA+ @variableB); }

Current behavior

Currently, this compiles to: .myHeight { height: calc(100% - 10px + 20px); }

Expected behavior

Previously, this compiled to: .myHeight { height: calc(100% - 30px); }

Workaround

I used a third variable as a workaround. @variableA: 10px; @variableB: 20px; @variableC: @variableA+ @variableB;

.myHeight { height: calc(~"100% - " @variableC); }

[kylej-89]

Just ran into this issue, the workaround is to structure your calc slightly different to preserver order of operations... as below

// New calc... important to use the curly braces for the fields and brackets for the order of operations .myHeight { height: calc(~"100% - (@{variableA}+ @{variableB})"); }

// This will compile now to .myHeight { height: calc(100% - (10px + 20px)); }

[kevinramharak]

This has to do with the --strict-math=on option stated in https://github.com/madskristensen/WebCompiler/blob/master/src/WebCompiler/Compile/LessCompiler.cs#L119.

This option is documented in the less docs at http://lesscss.org/usage/#less-options-strict-math-deprecated-.

This change was implemented in this commit https://github.com/madskristensen/WebCompiler/commit/fa3480fd3ccba9ea964078cac23490f34c587f31#diff-a510507bd8498a226c544d3ad8f7fe8a

You should check the less docs to check for the behaviour you want, and configure your compilerconfig.json with the "strictMath" property accordingly.