How the CSS3 calc should be resolved if evaluated at less compile time

This time to bring you CSS3 calc at less compile time if the calculation should be how to solve, solve CSS3 calc in less compile when the note that is calculated, here is the actual case, take a look.

For front-end er, less or sass is already a necessary basic skill, with this tool, can save the front-end developers a lot of coding time, let you write css like flowing, and then recently I added Calc in less to find a bit of a problem, I wrote in less:

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:

div {width:calc (70%);}

At that time I was depressed, how can produce such a phenomenon? Later a variety of checks, is due to the calculation of less than the Calc method has overlapping, the two are conflicting, so, I in less in the form of Calc rewrite to the following:

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

OK, the parse result is normal:

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

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

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

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

C:\users\zhong\webstormprojects\test>grunt lessrunning "Less:development" (Less) task>> ParseError: Unrecognised input in style.less to 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:

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 a mistake in mind old

Feel uncomfortable, look for half a day also didn't find webstorm how to debug syntax hints error settings

Then, 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 kind of writing, so, there will be no more problems.

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

HTML5 how to make a picture in circles animation effect

How to implement mobile-side page scaling in H5

Be aware of 3 common HTML5 error usages