Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to use the LESS of WebStorm in WeChat Mini Programs". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use the LESS of WebStorm in WeChat Mini Programs" can help you solve your doubts.

Less environment

Less needs npm of nodejs

The environment of nodejs is omitted here.

Own Baidu

Pass through

Npm install less-g

Install less

(unused libraries can be understood as maven libraries, gradle libraries, pods libraries)

Less usage of WebStorm

Associate the corresponding less first

Of course, the display of the corresponding wxss file in webstorm

WebStorm: problems encountered

Here, as long as the less file is created, the corresponding wxss file will be automatically generated (of course, if you write and save the less file, it will automatically refresh the wxss file, isn't it convenient?)

Comparison between Direct wxss and less

Let's look at the page first.

The page is simple.

Only one sky applies three cloud classes

View class= "container" >

Look at css again.

.sky {height: 480px; background: # 007fd5; position: relative; overflow: hidden; animation: sky_background 50s ease-out infinite;} .sky .clouds _ one {background: url (".. / resources/cloud/cloud_one.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; animation: cloud 50s linear infinite; transform: translate3d (0,0,0) }. Sky .clouds _ two {background: url (".. /.. / resources/cloud/cloud_two.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; animation: cloud 75s linear infinite; transform: translate3d (0,0,0);} .sky .clouds _ three {background: url (".. / resources/cloud/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; animation: cloud 120s linear infinite Transform: translate3d (0,0,0);} @ keyframes cloud {0% {left: 0;} 100% {left:-200%;}}

We found a lot of repetition.

The function is not difficult, but it takes up 70 lines and is difficult to reuse.

The revised painting also depends on the logic in it.

It is not convenient to modify it.

The use of Less

After we simply define variables and methods

With less, it goes something like this

@ dodo-out-height: 480px; / / @ dodo-out-height: 480rpx; / / @ dodo-out-height: 480rpx; / / 480rpx: 480rpx; / / 480rpx: 480rpx; / / dodo-out-height: 480rpx; / / 480rpx: 480rpx; / / @ dodo-img-url-clouds_two: 480px; / / @ rpx: 480px; / / @ rpx: 480px; / / @ dodo-img-url-clouds_three: ".. /. / resources/cloud/cloud_three.png" .sky {height: @ dodo-out-height; background: @ dodo-bg-sky; position: relative; overflow: hidden; animation: sky_background 50s ease-out infinite } .sky .clouds _ one {.dodo _ clouds (@ url:@dodo-img-url-clouds_one, @ time: 50s)} .sky .clouds _ two {.dodo _ clouds (@ url:@dodo-img-url-clouds_two, @ time: 75s)} .sky .clouds _ three {.dodo _ clouds (@ url:@dodo-img-url-clouds_three, @ time: 120s)} .dodo_clouds (@ url:@dodo-img-url-clouds_one, @ height: @ width: 300%, @ time: 100s) {background: url (@ url) Position: absolute; left: 0; top: 0; height: 100%; width: 300%; animation: cloud @ time linear infinite; transform: translate3d (0,0,0);} @ keyframes cloud {0% {left: 0} 100% {left:-200%}}

After saving

We found that the corresponding wxss file has also changed and directly generated a readable file.

It's not much different from the file written directly before.

There will be no corresponding variables and methods.

.sky {height: 480px; background: # 007fd5; position: relative; overflow: hidden; animation: sky_background 50s ease-out infinite;} .sky .clouds _ one {background: url (".. / resources/cloud/cloud_one.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; animation: cloud 50s linear infinite; transform: translate3d (0,0,0) }. Sky .clouds _ two {background: url (".. /.. / resources/cloud/cloud_two.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; animation: cloud 75s linear infinite; transform: translate3d (0,0,0);} .sky .clouds _ three {background: url (".. / resources/cloud/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; animation: cloud 120s linear infinite Transform: translate3d (0,0,0);} @ keyframes cloud {0% {left: 0;} 100% {left:-200%;}}

Preview:

After reading this, the article "how to use LESS of WebStorm in WeChat Mini Programs" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.