How can calc in css3 not be calculated when less is compiled?

This time I will show you how calc in css3 is not calculated when less is compiled. How calc in css3 is not calculated when less is compiled. What are the things to note?The following is a practical case, let’s take a look take a look.

For front-end ers, Less or Sass is already a necessary basic skill. With this tool, you can save a lot of coding time for front-end developers, allowing you to write CSS smoothly, and then Recently, I found some problems when adding calc to Less. I wrote this in Less:

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

As a result, Less executed this as an operation expression, and the result was analyzed to me like this:

p {width: calc(70%);}

I was depressed at that time. How could such a phenomenon happen? After various investigations, it was found that the calculation method of less overlapped with the calc method, and the two conflicted. So, I rewritten the writing method of calc in Less as follows:

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

OK, the analysis result Normal:

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

However, how to replace 30px with a variable?

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

Written like this Webstorm did not report an error, but grunt-less reported an 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.

So I wrote:

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

Compiled successfully, but Webstorm always promptsSyntax error, although it can be compiled, but there is an error message when I look at the file, I feel bad

I feel bad, I have been searching for a long time and I still can’t find how to use WebstormDebuggingSyntax prompt error setting

So, I changed it to the following way of writing:

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

This way of writing can be compiled and no errors are reported in Webstorm, so I prefer to use this way of writing. In this way, there will be no more problems. .

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

css3 animation sequence animation

How to use CSS weird box model and standard box model

The above is the detailed content of How can calc in css3 not be calculated when less is compiled?. For more information, please follow other related articles on the PHP Chinese website!