less函数选用变量选择器的实践和思考
less函数在元素背景图片上的实践
1.本来想给实践加一个定义,譬如最佳实践、最简实践之类的,后来想想,这撑死了也就算是一个利用less函数的偷懒实践。
2.预览地址:http://jwxf.163.com/ (第二屏的《九大开发好礼》效果为实践,后期有空会抽离出来)。
函数的设计思路
1.为元素引入背景图片的less函数,三个参数分别为图片的名字,设置容器的宽高。
//引入背景图片
.fnImageAccess( @imgSrc ,@width ,@height){
background: url("../img/@{imgSrc}.png") no-repeat;
background-size:100%;
height:@height;
width: @width;
}
2.图片的根目录相同,均可以调用上面的less函数,复用性较好。本文的实践项目中,有多个li元素,除了背景图片有出入,其余的部分都是相同的,那就要写8次.className{ .fnImageAccess() ...} (省略的是需要定义的其他class的属性)。细思极恐,考虑了一下,用上面复用性较好的代码,再封装一层,将className也作为变量传入参数。
//多次导入背景图片
.fnActivityImage( @className , @imgSrc ,@width:220px ,@height:310px){
@name : ~'@{className}';
.@{name}{
div{
.fnImagePosition(@imgSrc,@width,@height);
display: inline-block;
... //其他class的属性
}
}
}
思考
1、在less中,只能用常量作为选择器。如果选择器是作为参数变量传入的,可以将参数转化为字符串,然后将字符串转化为常量。
2、这个原理在可复用的less动画函数,道理同样简单。想要使动画函数可复用,关键问题在于写一个的动画函数使用同一个的时间帧,在不同的class中调用,会导致一个动画被触发,页面中复用的动画函数也被触发。这时的解决方案是,使用Math.random()函数为每次调用animation的方法名加一个随机数,再使用一中的方法。参考文章:https://zhuanlan.zhihu.com/p/27392300