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

【问题标题】：Concatenating arbitrary number of values in lesscss mixin在lesscss mixin中连接任意数量的值
【发布时间】：2011-12-14 10:40:18
【问题描述】：

标准的lesscss混合：

.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;
}

到即。创建嵌入和发光效果。当然在这种情况下我也想使用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 将多个参数与, 而不是连接起来？我认为这应该是一个或多或少的标准问题，但还没有找到任何规范的解决方案......

【问题讨论】：

标签： css less

【解决方案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);
}

【讨论】：

非常感谢，现在感觉有点蠢... :) 但是，嘿，不管用什么！
Less 1.3.0+ 的注意事项：传递可变参数所需的语法使用三个点 ...，因此上面的示例仅适用于 Less 1.2.0 及以下版本。对于那些使用较新版本的 Less，语法已更改为 require：.box-shadow(...)
@IanHill 感谢您的更新。我在 @lesscss.org 上找不到任何东西，你能链接到文档吗？
是的，它有点隐藏，而且主页似乎没有最新的所有当前功能。详细信息可以在更新日志中找到：github.com/cloudhead/less.js/blob/master/CHANGELOG.md，特别是关于“可变参数支持”的要点，它链接到以下显示使用的要点：gist.github.com/1933613

【解决方案2】：

如果您将参数字符串作为字符串文字转义，它将按照您的意愿携带逗号：

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

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

输出：

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

【讨论】：

【解决方案3】：

如果您使用 lessphp (http://leafo.net/lessphp/) 进行服务器端编译（而不是来自 http://lesscss.org 的 javascript lesscss 编译器），您可以绑定一个 php 函数并使用它来更改用于连接的字符。

lesscss 代码示例：

.linear-gradient(@fallback, @deg, @tail...) {
    background-color: @fallback;
    background-image: linear-gradient(@deg, separateByComma(@tail));
    background-image: -webkit-linear-gradient(@deg, separateByComma(@tail));
    background-image: -moz-linear-gradient(@deg, separateByComma(@tail));
    background-image: -o-linear-gradient(@deg, separateByComma(@tail));
}

body {
    .linear-gradient(#FCFCDD, 135deg, #FCFCDD, #FFFFFF 66%, #FCFCDD);
}

绑定php函数：

function lesscss_separateByComma($arg) {
    if($arg[0]=='list')
            $arg[1]=',';
        return $arg;
}

并进行绑定和编译lesscss代码：

$less=new lessc();
$less->registerFunction('separateByComma', 'lesscss_separateByComma');
$code=$less->compile($code);

输出：

body {
  background-color: yellow;
  background-image: linear-gradient(135deg,#FCFCDD,#FFFFFF 66%,#FCFCDD);
  background-image: -webkit-linear-gradient(135deg,#FCFCDD,#FFFFFF 66%,#FCFCDD);
}

用lessphp 0.4.0测试。

【讨论】：

现在所有 Less 编译器（包括 lesphp）都支持分号作为 mixin 参数分隔符，因此不再需要 ~"" 或宿主语言 hack...

【解决方案4】：

使用找到的解决方案 here 与一个 AND 多个参数一起工作：

.box-shadow (@value1,@value2:X,...)
{
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;

    -webkit-box-shadow: @value;
    -moz-box-shadow: @value;
    -ms-box-shadow: @value;
    -o-box-shadow: @value;
    box-shadow: @value;
}

【讨论】：