Why does Magento2 Blank Theme deploy this code so much, and how can I make it output the correct css?

Question

css

Greetings, I
ran into a problem from scratch:
there is such a code, registered in less, for example

@media (min-width: 860px) {
  .product {
    flex: 0 0 calc((100% / 3) - 20px);
  }
}

After the deployment in M2, I get a "calculated" code, of course, incorrect.

@media (min-width: 860px) {
    .product {
      flex: 0 0 calc(13.33333333%);
  }
}

Those. if I understand correctly, the type compiler calculates on the go, and it’s also wrong, because you can see that the pixels are replaced by% and this pure nonsense is displayed.
The theme is standard Blank, clean, everything is regular. Tested on versions 2.2 and 2.3 at least, as on others - I don't know...
I need this code to remain as it is, what can I do?

Answer 1

You need to escape, do not calculate the data with less, but send it to css "as is", for this you use the ~"exp" syntax, that is, you need to write
~"calc((100% / 3) - 20px)"