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

How do you create multiple box-shadow values in LESS CSS

提问by Mike McLin

Read This

There are several "correct" answers. Since this question gets a lot of traffic, I figured I should keep up with what (I think)the best answer is (based on the LESS documentation)as the LESS project matures, and change my accepted answer accordingly.

读这个

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

---

---

I'm using LESS and I haven't been able to find a fix for allowing multiple CSS3 box-shadows. I have the following mixin:

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

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

and I'm attempting this:

我正在尝试这样做：

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

This works in normal CSS3, but fails when running from a LESS file. I've read somewhere that the comma separating the 2 shadows is what causes the issue in the LESS parser.

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

Does anyone know how to make this work? The only workaround I can think of is creating an additional CSS file that contains my multiple box-shadow properties.

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

采纳答案by Paul Go

The best solution is to make separate overloads for each number of shadows. Less handles the proper overload resolution:

最好的解决方案是为每个阴影数量单独重载。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;
}

EDIT:

编辑：

Ok, I'm still learning about LESS, but it appears that will actually mixin ALLof the overloads in certain situations, instead of the one with the most applicable parameter list, so you may get varying results. I've since revised my mixins so that they're named box-shadow-2 or box-shadow-3, to match the expected number of parameters. I'll revise my answer once I figure out what's going on / have a better solution.

好的，我仍在学习 LESS，但似乎在某些情况下实际上会混合所有重载，而不是最适用的参数列表，因此您可能会得到不同的结果。从那以后，我修改了我的 mixin，将它们命名为 box-shadow-2 或 box-shadow-3，以匹配预期的参数数量。一旦我弄清楚发生了什么/有更好的解决方案，我将修改我的答案。

回答by iamnotsam

This works with newerLESS versions:

这适用于较新的LESS 版本：

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

And this uglier version works even with olderLESS versions:

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

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

Update:LESS evolved, so this answer was updated and is now correct again. Thanks Micha? Rybak

更新：LESS 进化，因此此答案已更新，现在再次正确。谢谢米查？雷巴克

回答by elclanrs

It should work just fine. I've used it before. Try with this mixin:

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

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

And then:

进而：

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

回答by Camilo Martin

LESS strips the comma. So the @argumentsvalue becomes:

LESS 去掉逗号。因此该@arguments值变为：

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

Which is invalid as a box-shadow.

作为盒影是无效的。

Instead, do this when you want a comma:

相反，当您需要逗号时，请执行以下操作：

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

.box-shadow(@temp);

回答by Micha? Rybak

This question is kind of out-of-date, as for now your solution actually works.

这个问题有点过时了，因为现在您的解决方案实际上有效。

---

---

However, I'll try to explain why, because many people seem to be unaware of that:

但是，我将尝试解释原因，因为很多人似乎不知道这一点：

Actually passing a list of comma-separated arguments to a mixin is pretty simple: just use semicolon (;) instead of comma in mixin call.

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

From LESS documentation:

来自LESS 文档：

Parameters are either semicolon or comma separated. It is recommended to use semicolon. The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or as css list separator. Using comma as mixin separator makes it impossible to use comma separated list as an argument.

Semicolon does not have such limitation. If the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons. All commas then belong to css lists.

参数以分号或逗号分隔。建议使用分号。符号逗号有双重含义：它可以解释为混合参数分隔符或 css 列表分隔符。使用逗号作为混合分隔符使得无法使用逗号分隔的列表作为参数。

分号没有这样的限制。如果编译器在 mixin 调用或声明中看到至少一个分号，则假定参数由分号分隔。所有逗号都属于 css 列表。

---

---

Mixin definition uses well-known, regular syntax:

Mixin 定义使用众所周知的正则语法：

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

But mixin callshould use semicolons to separate arguments. If semicolons are used, commas are no longer treated as separators and are passed to mixin without problems:

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

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

Note that if (as in the case above) only one listis passed, you have to use semicolon at the end, too.

请注意，如果（如上例所示）只传递了一个列表，则您也必须在末尾使用分号。

Check out my answer regarding multiple backgroundsto see how mixin call should look with multiple parameters, some of which are comma-separated lists.

查看我关于多个背景的回答，看看 mixin 调用应该如何使用多个参数，其中一些是逗号分隔的列表。

回答by u2250193

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

回答by Andrew Surdu

Here is another solution(which I prefer more):

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

Use e()string function. Ex: e("S1, S2")will return S1, S2without quotes.

使用e()字符串函数。例如：e("S1, S2")将S1, S2不带引号返回。

Long example:

长示例：

Definition:

定义：

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

Usage:

用法：

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

Output:

输出：

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

Reference: http://lesscss.org/functions/#string-functions-e

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