微信小程序中用WebStorm使用LESS


Posted in Javascript onMarch 08, 2017

前提

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

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

这里,只要创建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%;
 }
}

预览下:

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

Javascript 相关文章推荐
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
Vue常用指令V-model用法
Mar 08 #Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 #Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 #Javascript
js实现倒计时效果(小于10补零)
Mar 08 #Javascript
详解Vue监听数据变化原理
Mar 08 #Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 #Javascript
Vue 父子组件、组件间通信
Mar 08 #Javascript
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
机器学习10大经典算法详解
2017/12/07 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python使用thrift教程的方法示例
2019/03/21 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
简单的辞职信范文
2014/01/18 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
选购到合适的激光打印机
2022/04/21 数码科技