How Calc() calculate in css?

Question

Can somebody describe Use of Calc() in css? And what is ~ sign meaning with Calc()?

How below code calculate?

calc(~'(100% - 4 * 23.233%) / 3')

Answer 1

That is not a valid value in plain CSS.

It looks like that is from LESS source code, which is compiled down to the following:

calc((100% - 4 * 23.233%) / 3);

As stated by the relevant LESS documentation, ~'' is used for escaping:

Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.

This is done to prevent LESS from automatically evaluating the expression as math. Without the escaping, the value would be evaluated and compiled to:

calc(2.3559999999999994%);

For further reference, see this related question: "Less Aggressive Compilation with CSS3 calc".