How to solve the method of calc at less compile time in CSS3

This article mainly introduces the CSS3 calc in less compile the solution of the calculation of the relevant information, content is very good, and now share to everyone, but also for everyone to do a reference.

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.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!