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

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)