用WebStorm在微信小程序中使用LESS

作者: dodo_lihao | 来源:发表于2017-02-22 17:14 被阅读0次

【总结】2017.01.12
用WebStorm在微信小程序中使用LESS
微信小程序中使用watch监听和computed属性
webstorm小程序使用less
wiki
微信小程序使用 Less
微信小程序WebStorm插件，支持PHPSTORM,WEBST
小程序开发-01 用webstorm 开发小程序配置
微信小程序中使用redux
webstorm智能提示小程序代码，小程序代码自动补全，webs

前提

自己前端不熟悉，很多都需要练习
网上找了一个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%;
  }
}

预览下：