How calc is not computed at less compile time in CSS3

This time to bring you CSS3 in the Calc in less compile how not to be calculated, CSS3 in calc in less compile not to be calculated note what, the following is the actual case, together to see.

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:

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

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

P {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:

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

OK, the parse result is normal:

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

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

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

So 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 @diff: 30px;

>> 4 Width:calc (~ "100%-" + @diff);

>> 5}

Warning:error compiling style.less use--force to continue.

Aborted due to warnings.

And so wrote:

P {@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:

P {@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 read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Animated sequence of CSS3 animation

How CSS quirks box models and standard box models are used