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

php中世界最好的语言
Release: 2018-01-30 09:55:07
Original
2245 people have browsed it

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!

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn