Question

阅读本文

有几个“正确”的答案。由于这个问题得到了大量的流量，我认为我应该跟上（我认为）的最佳答案（基于LESS文档）作为LESS项目成熟，并相应地改变我接受的答案。

我正在使用LESS，但我无法找到允许多个CSS3盒阴影的修复程序。我有以下mixin：

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

我正在尝试这个：

.box-shadow(
    inset 0 0 50px rgba(0,0,0,0.3),
    0 0 10px rgba(0,0,0,0.5);
);

这适用于普通的CSS3，但在从LESS文件运行时失败。我已经读过某个地方，分隔2个阴影的逗号是导致LESS解析器出现问题的原因。

有谁知道如何使这项工作？我能想到的唯一解决方法是创建一个包含多个box-shadow属性的附加CSS文件。

Answer 1

适用于较新 LESS版本：

.box-shadow(2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8););
                                  // this semicolon is important! ^

这个丑陋的版本甚至适用于较旧 LESS版本：

.box-shadow(~"2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8)");

<强>更新 很少发展，所以这个答案已经更新，现在再次正确。谢谢MichałRybak

Answer 2

它应该工作得很好。我之前用过它。试试这个mixin：

.box-shadow (@shadow1, @shadow2: transparent 0 0 0 ) {
    -moz-box-shadow: @shadow1, @shadow2;
    -webkit-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}

然后：

.box-shadow(inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5));

Answer 3

很少删除逗号。因此@arguments值变为：

inset 0 0 50px rgba(0,0,0,0.3) 0 0 10px rgba(0,0,0,0.5);

作为盒子阴影无效。

相反，当你想要一个逗号时这样做：

@temp: inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);

.box-shadow(@temp);

Answer 4

最佳解决方案是为每个阴影数量制作单独的重载。 Less处理正确的重载分辨率：

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

.box-shadow(@shadow1, @shadow2) {
    -webkit-box-shadow: @shadow1, @shadow2;
    -moz-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}    

.box-shadow(@shadow1, @shadow2, @shadow3) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3;
    box-shadow: @shadow1, @shadow2, @shadow3;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4, @shadow5) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
}

编辑：

好的，我还在学习LESS，但似乎在某些情况下实际上会混合 ALL 重载，而不是具有最适用参数列表的那个，所以你可能得到不同的结果。我修改了我的mixins后，他们将其命名为box-shadow-2或box-shadow-3，以匹配预期的参数数量。一旦我弄清楚正在进行什么/有更好的解决方案，我就会修改我的答案。

Answer 5

.box-shadow (@shadow1) {
    -webkit-box-shadow: @shadow1;
    -moz-box-shadow: @shadow1;
    -ms-box-shadow: @shadow1;
    -o-box-shadow: @shadow1;
    box-shadow: @shadow1;
}
.box-shadow (@shadow1, @shadow2) {
    @temp: @shadow1, @shadow2;
    .box-shadow(@temp);
}
.box-shadow (@shadow1, @shadow2, @shadow3) {
    @temp: @shadow1, @shadow2, @shadow3;
    .box-shadow(@temp);
}

Answer 6

这个问题已经过时了，因为现在你的解决方案确实有效。

但是，我会尝试解释原因，因为很多人似乎都没有意识到这一点：

实际上将逗号分隔的参数列表传递给mixin非常简单：只需在mixin调用中使用分号（;）而不是逗号。

来自LESS documentation：

参数以分号或逗号分隔。建议使用分号。符号逗号具有双重含义：它可以解释为mixin参数分隔符或css列表分隔符。使用逗号作为mixin分隔符使得无法使用逗号分隔列表作为参数。
分号没有这样的限制。如果编译器在mixin调用或声明中看到至少一个分号，则它假定参数由分号分隔。所有逗号都属于css列表。

Mixin定义使用众所周知的常规语法：

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

但是mixin 调用应该使用分号来分隔参数。如果使用分号，逗号不再被视为分隔符，并且会毫无问题地传递给mixin：

.box-shadow(
  inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);
);

请注意，如果（如上所述）仅传递一个列表，则必须在末尾使用分号。

查看my answer regarding multiple backgrounds以查看mixin调用应如何查看多个参数，其中一些参数是以逗号分隔的列表。

Answer 7

这是另一种解决方案（我更喜欢）：

使用e()字符串函数。例如：e("S1, S2")会在没有引号的情况下返回S1, S2。

长例：

定义：

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

用法：的

.box-shadow( e("inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2)") );

输出：

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);

参考：http://lesscss.org/functions/#string-functions-e

如何在LESS CSS中创建多个框阴影值

阅读本文

7 个答案: