用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源码

刚开始写微信小程序 因为所有的do都来自于网络 自己放在github上,如果愿意参考,可以看 (时间原因,官方demo上面简单添加) dodo的微信小程序demo

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张泽旭的专栏

Applet小应用程序之间的通讯

1、 首先解压:如何运行applet.zip文件,解压后如图

763
来自专栏小怪聊职场

爬虫|利用Anyproxy爬取微信公众号文章及临时链接转永久链接

1.2K8
来自专栏Python攻城狮

GitHub 系列之「向GitHub 提交代码」1.SSH2.生成SSH key3.GitHub 上添加 SSH key4.Push & Pull5.提交代码

你拥有了一个 GitHub 账号之后,就可以自由的 clone 或者下载其他项目,也可以创建自己的项目,但是你没法提交代码。仔细想想也知道,肯定不可能随意就能提...

712
来自专栏Java学习之路

从初识Maven到使用Maven进行依赖管理和项目构建

前些天就安装了Maven,以备自己以后整合项目用,尤其是我们的ssh,ssm项目。想必好多人在开始的时候并不清楚Maven是什么,它能够帮助我们干什么。 所以...

3687
来自专栏西安-晁州

hexo&github博客搭建

闲来无事,偶然看到hexo,便试着玩玩,hexo是一种静态博客工具,使用nodejs流生成静态博客,速度快,主题多,附地址:https://hexo.io/ 下...

4390
来自专栏西安-晁州

webpack学习之入门实例

webpack:前端打包神器,目前活跃度甚至超过了gulp、grunt等,使用webpack打包,简单快速,下面记录下webpack环境搭建以及基本使用: 1、...

1920
来自专栏HTML5学堂

Git与通过Git添加提交文件

HTML5学堂-利利:前面几个礼拜,我们比较全面的介绍讲解了关于AJAX中相对比较高级的知识 - 跨域。本周周三的文章,想为大家介绍一款工具——Git。如果开发...

3647
来自专栏IT米粉

hexo——轻量、简易、高逼格的博客

写blog虽然经历了N多不同时代的产品,恒久不变的始终是自己无人问津的网站。虽然没几个人看,还是隔断时间就要折腾一下。从最开始的wordpress,到tale,...

2732
来自专栏虚拟化云计算

libvirt-虚拟机qos控制

libvirt提供了一系列tune的方式,来实现对虚拟机的qos精细控制。下面介绍cpu、内存、磁盘io、网络带宽的qos控制方式。

6178
来自专栏古时的风筝

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 首先...

4619

扫码关注云+社区