How to solve the problem if calc of css3 is calculated when less is compiled?-CSS Tutorial-php.cn

This time I will bring you how to solve the problem if the calc of css3 is calculated when compiling with less.What are the precautions?The following is a practical case. , let’s 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:

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

Copy after login

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

div {width: calc(70%);}

Copy after login

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:

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

Copy after login

OK, the analysis result Normal:

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

Copy after login

However, how to replace 30px with a variable?

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

Copy after login

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.

Copy after login

So I wrote like this:

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

Copy after login

It compiled successfully, but Webstorm always promptedSyntax error, although it can be compiled, but there is an error message in the file, which makes me feel bad

. I have been searching for a long time and I still can’t find how to debug the syntax prompt error setting in Webstorm

So, Change it to the following way of writing:

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

Copy after login

This way of writing can be compiled and no errors will be 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 methods after reading these cases. For more exciting information, please pay attention to the php Chinese websiteOtherrelated articles!