How to use Calc in less

Article reproduced from the Jones Taiwan Blog: http://www.qttc.net/201409448.html

Less benefits Needless to say everyone knows, really let the person who writes CSS is not painful, recently I added Calc in less to find a bit of a problem, I wrote in less:

123	div {    width : calc(100%- 30px);}

As a result, less took this as an arithmetic to execute, and the result gave me a resolution like this:

123	div {  width: calc(70%);}

So I rewrote less to this:

123	div {    width : calc(~"100% - 30px");}

The parse result is normal:

123	div {  width: calc(100%- 30px);}

However, replace the 30px with a variable, how to write it?

1234	div {    @diff : 30px;    width : calc(~"100% - "+ @diff);}

So write Webstorm no error, but grunt-less error:

123456789

C:\Users\zhong\WebstormProjects\test>grunt lessRunning "less:development" (less) task>> ParseError: Unrecognised input in style.less on line 4, column 2:>> 3    @diff : 30px;>> 4    width : calc(~"100% - " + @diff);>> 5 }Warning: Error compiling style.less Use --force to continue.Aborted due to warnings.

And so wrote:

1234	div {    @diff : 30px;    width : calc(~"100% - "@diff);}

The successful compilation of the past, but Webstorm is always prompt syntax error, although can compile but look at the file there is an error hint in the heart old feeling uncomfortable, looking for half a day did not find webstorm how to debug syntax hints error settings

Then, change to the following wording:

1234	div {    @diff : 30px;    width : calc(~"100% - @{diff}");}

This kind of writing can compile again, webstorm not error, so I prefer to use this kind of writing.

How to use Calc in less