如何在 LESS CSS 中创建多个 box-shadow 值答案

【问题标题】：How do you create multiple box-shadow values in LESS CSS如何在 LESS CSS 中创建多个 box-shadow 值
【发布时间】：2012-03-03 03:13:10
【问题描述】：

阅读本文

有几个“正确”的答案。由于这个问题有很多流量，我想我应该跟上（我认为）最好的答案是（基于LESS文档）作为LESS项目成熟，并相应地更改我接受的答案。

我正在使用 LESS，但我无法找到允许多个 CSS3 框阴影的解决方案。我有以下混合：

.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 文件运行时会失败。我在某处读到，分隔两个阴影的逗号是导致 LESS 解析器出现问题的原因。

有谁知道如何进行这项工作？我能想到的唯一解决方法是创建一个额外的 CSS 文件，其中包含我的多个 box-shadow 属性。

【问题讨论】：

现在您的解决方案 .box-shadow( inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5); ); 可以正常工作（通过 less2css.org 测试）。
完整解释见我的回答。
我的旧答案也已更新，以进一步帮助避免混淆
This answer 有另一种方法（选项 3）使用最新的 Less 功能执行此操作，并提供更多的灵活性。如果您愿意，我将为 box-shadows 自定义该答案并在此处发布。

标签： css less

【解决方案1】：

它应该可以正常工作。我以前用过。试试这个 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));

【讨论】：

我使用了类似的东西，但只传递了一个参数（整体 box-shadow 值）。由于参数有逗号，我猜它假设我传递了 2 个参数。没有考虑到这一点。谢谢。
这只是两个...有趣的部分是添加无限量的盒子阴影。最终，这并不是那么有帮助。

【解决方案2】：

这适用于 较新的 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)");

更新： LESS 进化了，所以这个答案已经更新，现在又是正确的。谢谢 Michał Rybak

【讨论】：

这更灵活，是的，但仍然需要大量处理 RGBA 值，而正确使用 mixin 可以更轻松地完成。我还是同意这暂时是正确的答案。
但是我如何添加一个变暗功能而不是 rgba 颜色？
对于更新的版本，请查看我的答案。

【解决方案3】：

LESS 去掉逗号。所以@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);

【讨论】：

【解决方案4】：

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

【讨论】：

不确定这是这个问题的答案，但这是我的问题的答案！！ :-)

【解决方案5】：

最好的解决方案是为每个阴影数量分别进行重载。 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 的重载，而不是具有最适用参数列表的重载，因此您可能会得到不同的结果。我已经修改了我的 mixin，将它们命名为 box-shadow-2 或 box-shadow-3，以匹配预期的参数数量。一旦我弄清楚发生了什么/有更好的解决方案，我会修改我的答案。

【讨论】：

我已经测试了这个功能，效果很好...codepen.io/mikemclin/pen/cHtfu
是的，但这是不必要的，与解决方案相比，这是一种不正确的方法 ".box-shadow(~"inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba( 0,0,0,0.5)");"从编程的角度来看，原因有很多。
@Neo -- 不一定。删除字符串中的长代码区域基本上会杀死您的 IDE/编辑器提供的所有服务，这比 IMO 的任何缺点都要糟糕得多。无论如何，任何重复的代码都会被智能 CSS 缩小器删除。
@neo - 除非我弄错了，否则您的建议无法一步完成这样的任务....box-shadow(0 0 10px darken(@red, 20%), 0 0 10px lighten(@green, 20%))。但我选择的答案可以。如果我忽略了什么，请告知。

【解决方案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 call 应该使用分号来分隔参数。如果使用分号，逗号不再被视为分隔符，并毫无问题地传递给 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 调用应该是什么样子，其中一些参数是逗号分隔的列表。

【讨论】：

【解决方案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 推荐的解决方案。推荐的方法在问题本身和@Michał Rybak 答案中给出。
@seven-phases-max，如果我使用分号，它对我不起作用。我不知道为什么。
“对我不起作用”几乎不能作为将过时的 hack 推荐为“简单而强大的解决方案”的借口。 AFAIK 的“分号”方式甚至适用于 1.3.3 等古老的 Less 版本以及过时的端口，如 lessphp 或 dotless。 ~"" 本身并没有什么问题，但它不应该被用作“毫无疑问”。
好吧，我的错。我更新了我的答案并添加了对示例中使用的函数的引用。
好吧，e() 只是~"" 的别名，所以没有什么真正改变。毕竟这 ~"" 方法已经在 2 年前给出的@storypixel 答案中，所以......