在lesscss mixin中连接任意数量的值 [英] Concatenating arbitrary number of values in lesscss mixin

问题描述

标准lesscss mixin：

Standard lesscss mixin:

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

但是，在纯CSS中，我可以使用几个框阴影元素，例如

However, in pure CSS I'm able to use several box shadows on one element, e.g.

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

创建插入和发光效果。当然，我想在这种情况下使用lesscss来修复供应商前缀诅，，但

To ie. create an inset and glow effect. Of course I want to use lesscss to remedy the vendor-prefix curse in this case too, but

.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连接多个参数与，而不是 ？我认为这应该是一个或多或少的标准问题，但没有找到任何规范的解决方案...

(notice the missing commas after white)! Which is syntactically incorrect. Is there any way to trick lesscss into concatenating multiple arguments with , instead of ? I thought this should be a more-or-less standard problem, but haven't found any canonical solutions...

推荐答案

使用转义字符串

Use an escaped string

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

或javascript转义

少于1.2.0及以下：

Less 1.2.0 and below:

.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及以上（需要并使用 ... variadic说明符）：

Less 1.3.0 and above (requires and uses ... variadic specifier):

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

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

The author's recommended way is an intermediate variable:

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

这篇关于在lesscss mixin中连接任意数量的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！