When using the calc () attribute in LESS, I encountered the following problem:
When compiling the code height: -webkit-calc(100vh - 6em); the output resulted in the calculation of 100 - 6 and adds the unit of the first value to the end.
How do you solve this problem?
There are two solutions.
The first one would be to remove the calc () from the LESS file, and place it directly in the output CSS or even inline in the respective HTML file. This however generates a great discomfort without mentioning that it seems somewhat gambiarra.
Second solution was that after much research I found an escape code that the preprocessor itself makes available so that the accounts are not executed. It works as follows: you pass ~ "" and within the quotes go the operator that should not be compiled.
Example:
height: -webkit-calc(100vh ~"-" 6em);
Result:
The operation is not compiled by LESS and calculated in the browser.
Now, it works correctly.