Is there a way to use variables in Less for the ~ operator, like ~"calc(100% - @spacing)";

Is there a way to use variables in less ~ operator, like

~"calc(70% - @spacing)";

When I have tried it it only works with static values like

 ~"calc(70% - 10px)";

Can I get the string to be evaluated prior to beeing set as a property.

To disable the calculation which LESS does automatically when discovering a - between two numeric values but still being able to use variables, you can write one of the following:

1. Only escape the operator that triggers the calculation and use the variable like you normally do

   @padding: 20px; body { padding: calc(100% ~"-" @padding); }

2. Escape the whole expression and interpolate the variable with the @{padding} notation

   @padding: 20px; body { padding: ~"calc(100% - @{padding})"; }

I prefer the second version, since it resembles javascript's template literals and looks a bit cleaner, but either way works just fine.

Both solutions disable the automatic Less calculation and compile to the correct result:

body {
  padding: calc(100% - 20px);
}