微信小程序中用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 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
jQuery插件之validation插件
Mar 29 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
js制作提示框插件
Dec 24 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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
php 抽象类的简单应用
2011/09/06 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
Python中使用中文的方法
2011/02/19 Python
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
详解Python当中的字符串和编码
2015/04/25 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
python如何爬取网页中的文字
2020/07/28 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
社区母亲节活动方案
2014/03/05 职场文书
我的理想演讲稿
2014/04/30 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL