有关less 处理@arguments的一些高级技巧

//http://stackoverflow.com/questions/14350749/less-arguments-with-linear-gradients-commas

.mixin(...) {

  filter: gradient( ~`@{arguments}.join(",")` );

}

 

.test {

 .mixin("x1","x2","x3")

}

输出

test {

 filter: gradient(x1,2,3);

}

就是捕捉用户所有传入的参数，然后拼接

这里有一篇讲述早期如此与@arguments作斗争的http://www.toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/ 不过，1.32出来后就作废了。看现在的做法

.flex(@flex) {

  -webkit-box-flex: @flex;

  -moz-box-flex: @flex;

  -o-box-flex: @flex;

  box-flex: @flex;

  -webkit-flex: @flex;

  -moz-flex: @flex;

  -ms-flex: @flex;

  -o-flex: @flex;

  flex: @flex;

}

ul {

     @value:1 1 auto;

    .flex(@value);

    list-style: none;

    margin: 0;

    padding: 0;

    background: hsl(200,100%,90%);

    //min-height: 0;

    overflow: auto;

}

看到没有，现在我们可以把传参放到一个变量中，我这里叫@value，随你怎么定义，然后再传到函数里。支持传变量，对于.transition，.transform这样需要传复杂的字符串的CSS数来说，就简单多了。

最后这里还一篇，一些更有用的技巧http://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/

如果您觉得此文有帮助，可以打赏点钱给我支付宝1669866773@qq.com ，或扫描二维码