微信小程序中用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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
JS解析XML实例分析
Jan 30 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
使用uni-app开发微信小程序的实现
Dec 13 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 获取目录下的图片并随机显示的代码
2009/12/28 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python实现人脸识别代码
2017/11/08 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python异步存储数据详解
2019/03/19 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
购房个人委托书范本
2014/10/11 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
诚信教育主题班会
2015/08/13 职场文书
班主任寄语2016
2015/12/04 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书