How to solve the problem that calc in css3 is calculated when less is compiled

This article mainly introduces relevant information about how calc in CSS3 is calculated during less compilation. The content is quite good. I will share it with you now and give it as a reference.

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 did find a problem when adding calc to Less. I wrote this in Less:

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

As a result, Less treated this as an operation expression to execute. , 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 together. So, I rewritten the writing method of calc in Less as follows:

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

OK, the parsing result is 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 write:

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

It compiled smoothly, but Webstorm always prompted syntax errors. Although it could be compiled, there was an error message when I looked at the file. I felt unhappy. I searched for a long time and couldn't find how to debug the syntax of Webstorm. Prompt error setting

So, I changed it to the following writing:

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

This writing method can compile and no error is reported in Webstorm, so I I prefer to use this way of writing, so there won't be any problems.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis on the difference between animation attributes transform, transition and animation attributes in CSS3

How to deal with the unknown The height of the image setting is vertically centered

About the calc() method in CSS3

The above is the detailed content of How to solve the problem that calc in css3 is calculated when less is compiled. For more information, please follow other related articles on the PHP Chinese website!