How to use Calc in the less framework

The benefits of the

Less needless to say, everyone knows that it does not hurt to write CSS, and I did find some problems when I joined Calc recently in less, which I wrote in less:
Div {
 width:calc (100%-30px);

The result less this as an expression, and the result is resolved to me as follows:
Div {
  width:calc (70%);
}
So, I rewrite less to this:
Div {
 width:calc (~ "100%-30px");
}
The parse result is normal:
Div {
  width:calc (100%-30px);
}
However, instead of replacing 30px with a variable, how do I write it?
Div {
  @diff: 30px;
 width:calc (~ "100%-" + @diff);
}
This write Webstorm no error, but grunt-less error:
C:\users\zhong\webstormprojects\test>grunt less
Running "less: Development "(less) task
>> parseerror:unrecognised input in style.less on line 4, column 2:
>> 3&nbs p;   @diff: 30px;
>> 4    Width:calc (~ "100%-" + @diff);
>> 5}
Warning:error compiling style.less use--force to continue.

Aborted due to warnings.
So write:
div {
@diff: 30px;
Width:calc (~ "100%-" @diff);
}
The successful compilation of the past, but Webstorm is always prompted syntax errors, although also can compile but look at the file has a wrong hint heart old feeling bad, find half day also didn't find webstorm how to debug syntax prompts error settings

So, change to the following wording:
div {
@diff: 30px;
Width:calc (~ "100%-@{diff}");
}
This kind of writing can compile again, webstorm not error, so I prefer to use this writing.