微信小程序中用WebStorm使用LESS的方法

前提

网上找了一个css的demo， 放到微信小程序后，可以运行

图片很大，没有弄，加载可能有点慢（不相关的，就不扯了）

Less环境

Less需要nodejs的npmnodejs的环境这里略了自己百度

通过

npm install less -g

安装好 less（没有用过的，可以理解为 maven的库， gradle库，pods的库）

WebStorm的Less使用

先关联对应的less

WebStorm：遇到的问题

这里，只要创建less文件，就会自动生成对应的wxss文件了（当然，写好保存less文件，会自动刷新wxss文件，很方便吧）

直接wxss和 less的比较

就只有一个 sky 套用 3个cloud 类

view class="container">  <view class="sky">   <view class="clouds_one"> </view >   <view class="clouds_two"> </view >   <view class="clouds_three"> </view >   <view class="clouds_three"></view>  </view>  </view>

再看看css

.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%;  } }

修改也不方便

Less的使用

用less 大体是这样的

@dodo-out-height : 480px; //@dodo-out-height : 480rpx; @dodo-bg-sky : #007fd5; @dodo-img-url-clouds_one : "../../resources/cloud/cloud_one.png"; @dodo-img-url-clouds_two : "../../resources/cloud/cloud_two.png"; @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: 100%, @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%  } }

也不会出现对应的变量和方法

.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%;  } }

预览下：

也没有区别，只是代码写起来更方便（建议机子配置可以的画，开发别用微信提供的ide，效率太低）

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于微信小程序Redux绑定的解析

关于微信小程序MD5的方法的解析

以上就是微信小程序中用WebStorm使用LESS的方法的详细内容，更多内容请关注技术你好其它相关文章！