前提
自己前端不熟悉，很多都需要练习
网上找了一个css的demo， 放到微信小程序后，可以运行
图片很大，没有弄，加载可能有点慢（不相关的，就不扯了）
Less环境
Less需要nodejs的npm nodejs的环境这里略了 自己百度
通过
安装好 less （没有用过的，可以理解为 maven的库， gradle库，pods的库）
WebStorm的Less使用
先关联对应的less
可以参考自己其他文章
这里，只要创建less文件，就会自动生成对应的wxss文件了（当然，写好保存less文件，会自动刷新wxss文件，很方便吧）
直接wxss和 less的比较
我们先看下页面
页面很简单
就只有一个 sky 套用 3个cloud 类
再看看css
我们发现有很多重复的地方
功能不难，但是占了70行，并且很难复用
修改的画，还要看里面的逻辑
修改也不方便
Less的使用
我们简单定义变量 和 方法以后
用less 大体是这样的
.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);
}
@keyframes cloud {
0% {
left: 0
}
100% {
left: -200%
}
}
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);
}
@keyframes cloud {
0% {
left: 0
}
100% {
left: -200%
}
}
保存后，
我们发现对应的wxss文件，也改变了，直接生成了可以读取的文件
和之前直接写的文件没有太大区别
也不会出现对应的变量和方法
预览下：
也没有区别，只是代码写起来更方便（建议机子配置可以的画，开发别用微信提供的ide，效率太低）
less很强大，其他的地方，有时间再深入，
感觉less好用在于它的复用性 ：）
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
原文链接：https://www.f2er.com/weapp/40908.html