微信小程序中用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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 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
解析PHP无限级分类方法及代码
2013/06/21 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
js的with语句使用方法
2007/09/21 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
js计算精度问题小结
2013/04/22 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
吐槽一下我所了解的Node.js
2014/10/08 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
js实现有趣的倒计时效果
2021/01/19 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python上selenium的弹框操作实现
2020/07/13 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
企业精细化管理实施方案
2014/03/23 职场文书
应聘会计求职信
2014/06/11 职场文书
保密工作整改报告
2014/11/06 职场文书
小学四年级作文之写景
2019/08/23 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
Nginx中break与last的区别详析
2021/03/31 Servers