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

Question

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，但我一直无法找到允许多个 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 文件运行时失败。我在某处读到，分隔 2 个阴影的逗号是导致 LESS 解析器出现问题的原因。

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

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

更新:LESS 进化了，所以这个答案更新了，现在又正确了。谢谢 Michał Rybak