在lesscss mixin中连接任意数量的值

Question

标准lesscss mixin:

.box-shadow(@val) {
    -moz-box-shadow: @val;
    box-shadow: @val;
}

但是,在纯CSS中,我可以在一个元素上使用多个框阴影,例如

#myBox {
    box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
    -moz-box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
}

为了ie.创建插入和发光效果.当然,我也想在这种情况下使用lesscss来修复供应商前缀诅咒,但是

.box-shadow() {
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

#myBox {
    .box-shadow(inset 0px 1px 0px white, 0px 0px 5px #aaa);
}

将呈现

#myBox {
    box-shadow: inset 0px 1px 0px white 0px 0px 5px #aaa;
    -moz-box-shadow: inset 0px 1px 0px white 0px 0px 5px #aaa;
}

(注意之后丢失的逗号white)!这在语法上是不正确的.有没有办法欺骗lesscss连接多个参数,而不是？我认为这应该是一个或多或少的标准问题,但没有找到任何规范的解决方案......

Answer 1

使用转义字符串

#myBox { .box-shadow(~"inset 0px 1px 0px white, 0px 0px 5px #aaa"); }

或者一个javascript逃脱

减少1.2.0及以下:

.box-shadow() {
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`;
    -webkit-box-shadow: @shadow;
       -moz-box-shadow: @shadow;
            box-shadow: @shadow;
}
#myBox { .box-shadow(inset 0px 1px 0px white, 0px 0px 5px #aaa); }

减去1.3.0及以上(需要并使用...可变参数说明符):

.box-shadow(...) {
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`;
    -webkit-box-shadow: @shadow;
       -moz-box-shadow: @shadow;
            box-shadow: @shadow;
}

作者推荐的方式是一个中间变量:

#myBox {
  @shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
  .box-shadow(@shadow);
}