Closed LenAnderson closed 4 years ago
This should be changed from Enhancement to Bug. With the settings the way they currently are, something like this is rendered impossible:
@size1 = 30px;
@size2 = 40px;
.div {
height: calc(100% - @size1 - @size2);
}
The above should be compiled to the following css:
.div {
height: calc(100% - 30px - 40px);
}
With the settings the way they are, this is the css output:
.div {
height: calc(30%);
}
And with the suggested bandaid fix in the OP, this is the css output:
.div {
height: calc(100% - @size1 - @size2); // INVALID CSS
}
@LoganGerber more crutches, but you can work around your problem by typing this:
.div {
height: ~"calc(100%" - @size1 - @size2 ~")";
}
which will turn into:
.div {
height: calc(100% - -10px );
}
@LenAnderson @LoganGerber just trying to repro this in v1.6.2 of Easy LESS and finding it's not still happening, as described above.
Thinking this must be due to the changes to how calc
is processed in Less 3.x, which was introduced in Easy LESS v1.5.0.
As described here:
http://lesscss.org/usage/#less-options-math
Currently the compiler calculates anything that remotely looks like a calculation and just ignores units. As a result
100vw - 100px
becomes0vw
. For a long time LESS has offered thestrictMath
option to avoid this and only apply calculation in superfluous parentheses.Recently this option has been deprecated in favor of a more flexible
math
option that offers the two previously available modes along with a couple of others.While the aggressive calculation can be avoided by typing
~"100vw - 100px"
support for either the new "math" option or just the old "strictMath" option would make life a lot easier and the LESS code more readable. It would also address the issue raised in #35.