How to solve the problem if calc of css3 is calculated when less is compiled?

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);}

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

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

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

OK, the analysis result Normal:

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

However, how to replace 30px with a variable?

div {
@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 like this:

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

It compiled successfully, but Webstorm always prompted Syntax 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}");
}

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 website Other related articles!

Related reading:

html5 How to create a circle animation effect of pictures

In h5, the mobile page should be zoomed How to implement

#Be sure to pay attention to the three common incorrect usages of HTML5

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