Why is less precomputing the viewport height in calc()?

Question

I have a simple class in myfile.less that looks like this:

.myclass {
    width: calc(100vh - 50px);
}

I would assume that the compiled css output would look identical. However, running "lessc myfile.less" outputs the following:

.myclass {
    width: calc(50vh);
}

Why is it making this change? 100% of the viewport height minus 50 pixels is not necessarily the same as 50% viewport height. I am using less v2.5.1 installed via npm, but also tried reverting to v1.7.5 and I get the same output.

Answer 1

You have to use "escape" function as suggested in this answer to a similar question.

width:calc(100vh ~"-" 50px);