Jeanluca Scaljeri Jeanluca Scaljeri - 2 months ago 8
CSS Question

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

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

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.