微信小程序中用WebStorm使用LESS

前提

自己前端不熟悉，很多都需要练习

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

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

Less环境

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

通过

npm install less -g

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

WebStorm的Less使用

先关联对应的less

当然，对应的wxss文件，在webstorm中的显示，

可以参考自己其他文章

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

我们发现有很多重复的地方

功能不难，但是占了70行，并且很难复用

修改的画，还要看里面的逻辑

修改也不方便

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

保存后，

我们发现对应的wxss文件，也改变了，直接生成了可以读取的文件

和之前直接写的文件没有太大区别

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

.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，效率太低）

less很强大，其他的地方，有时间再深入，

感觉less好用在于它的复用性 ：）

简单demo源码：http://xiazai./201703/yuanma/weapp-start-master().rar

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序  # WebStorm使用LESS  # 微信小程序 less文件编译成wxss文件实现办法  # 如何在微信小程序中使用less详解(最优方式)  # 复用  # 就会  # 也不  # 成了  # 很难  # 有很多  # 是这样  # 就不  # 其他的  # 太大  # 希望能  # 很简单  # 要看  # 找了  # 只有一个  # 用过  # 占了  # 谢谢大家  # 好用  # 很方便 

相关文章： 建站之星代理如何获取技术支持？  如何快速上传建站程序避免常见错误？  高防服务器如何保障网站安全无虞？  如何在七牛云存储上搭建网站并设置自定义域名？  清除minerd进程的简单方法  建站主机选购指南与交易推荐：核心配置解析  网站好制作吗知乎,网站开发好学吗？有什么技巧？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  专业的网站制作设计是什么,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何选择高效响应式自助建站源码系统？  网站制作员失业,怎样查看自己网站的注册者？  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  如何通过虚拟主机空间快速建站？  公司门户网站制作流程,华为官网怎么做？  如何通过西部数码建站助手快速创建专业网站？  用v-html解决Vue.js渲染中html标签不被解析的问题  小型网站建站如何选择虚拟主机？  建站之星2.7模板快速切换与批量管理功能操作指南  黑客入侵网站服务器的常见手法有哪些？  c++ stringstream用法详解_c++字符串与数字转换利器  Python lxml的etree和ElementTree有什么区别  Swift中循环语句中的转移语句 break 和 continue  建站主机解析：虚拟主机配置与服务器选择指南  香港服务器部署网站为何提示未备案？  建站DNS解析失败？如何正确配置域名服务器？  制作假网页,招聘网的薪资待遇，会有靠谱的吗？一面试又各种折扣？  如何打造高效商业网站？建站目的决定转化率  建站主机默认首页配置指南：核心功能与访问路径优化  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  如何获取上海专业网站定制建站电话？  如何快速搭建高效简练网站？  如何高效完成独享虚拟主机建站？  ,柠檬视频怎样兑换vip？  家庭建站与云服务器建站，如何选择更优？  C++用Dijkstra(迪杰斯特拉)算法求最短路径  如何通过山东自助建站平台快速注册域名？  如何选择最佳自助建站系统？快速指南解析优劣  微课制作网站有哪些,微课网怎么进？  ,怎么在广州志愿者网站注册？  如何在阿里云购买域名并搭建网站？  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  宁波免费建站如何选择可靠模板与平台？  武汉网站如何制作,黄黄高铁武穴北站途经哪些村庄？  如何选择高效稳定的ISP建站解决方案？  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  建站之星如何快速生成多端适配网站？  建站之星官网登录失败？如何快速解决？  广州营销型建站服务商推荐：技术优势与SEO优化解析  湖北网站制作公司有哪些,湖北清能集团官网？  建站之星后台密码如何安全设置与找回？