~ in calc() calculation attribute means to prevent compilation by less syntax

Posted Jun 16, 20201 min read

calc can be used directly in css.

I feel that the subject is talking about the syntax of less, because less originally had-arithmetic operations, so adding `~" "in calc prevents compilation by less.

For example in css

height:calc(100%-30px);

The representative is 100%height minus 30 pixels.

But if this is also written in less, when less is compiled into css, it will become

height:calc(70%);

Because less itself has the operation of ‘subtract’, it violates the original intention, so in less, it should be written as:

height:~"calc(100%-30px)";