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

转载于:https://www.cnblogs.com/huasw/articles/8735093.html