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

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

Answer 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测试。

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

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

4 个答案: