what does this css do: ~"-moz-calc(..)"

Question

I just noticed a css rule that looked like this

width: ~"-moz-calc(100% - 10px)";

Now I know -moz-calc, but why is this a string and what is the meaning of the '~'?

Answer 1

That's actually LESS, a CSS preprocessor.

The ~"" syntax creates a literal value which doesn't process its contents as LESS.
Otherwise, it would try to compile -moz-calc() as a LESS function.