Less实现函数作为参数传递，创建css3动画@keyframe

最近想实现一个css3动画的函数，但是创建@keyframe时，老是碰到一个问题，就是将函数function作为参数传递。研究了半天，发现可以这样写。

.function-name(@function-param){
  @function-param();
}
.function-name({

});

不过这种写法不能用于普通的函数参数传递，目前只发现适用于keyframes动画，看下面

/**
* animation
*/
.keyframes (@prefix,@name,@content) when (@prefix=def) {
  @keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=moz) {
  @-moz-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=o) {
  @-o-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
  @-webkit-keyframes  @name{
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {
  .keyframes(moz,@name,@content);
  .keyframes(o,@name,@content);
  .keyframes(webkit,@name,@content);
  .keyframes(def,@name,@content);
}

然后我们如何创建不同各种浏览器内核的@keyframes呢？

.keyframes(all,zindex,{
  from{z-index :100;}
  to{z-index: -100}
});

解析之后，就生成了下面这样的css。

@-moz-keyframes zindex {
  from {
    z-index: 100;
  }
  to {
    z-index: -100;
  }
}
@-o-keyframes zindex {
  from {
    z-index: 100;
  }
  to {
    z-index: -100;
  }
}
@-webkit-keyframes zindex {
  from {
    z-index: 100;
  }
  to {
    z-index: -100;
  }
}
@keyframes zindex {
  from {
    z-index: 100;
  }
  to {
    z-index: -100;
  }
}

这是不是你想要的呢？嘻嘻，快拿去用吧~