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

不言
Release: 2018-06-26 14:53:19
Original
1745 people have browsed it

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);}
Copy after login

As a result, Less treated this as an operation expression to execute. , the result was analyzed to me like this:

p {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 together. So, I rewritten the writing method of calc in Less as follows:

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

OK, the parsing result is normal:

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

However, how to replace 30px with a variable?

  p {
  @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.

So write:

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

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}");
  }
Copy after login

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!

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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!