Question

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.

Answer 1

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);
}