你如何在LESS CSS中创build多个盒子阴影值
读这个
有几个“正确的”答案 。 由于这个问题得到了很多的stream量，所以我想我应该在LESS项目成熟的时候跟上（我认为）最好的答案（根据LESS文档） ，并相应地改变我接受的答案。
我正在使用LESS，而我一直无法find允许多个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文件运行时失败。 我读过的地方是，分隔两个阴影的逗号是在LESSparsing器中导致问题的原因。
有谁知道如何使这项工作？ 我能想到的唯一的解决方法是创build一个包含我的多个盒子阴影属性的额外的CSS文件。
最好的解决办法是为每个阴影数目分别重载。 较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，但是在某些情况下，实际上会混入所有的重载，而不是具有最适用的参数列表，所以你可能会得到不同的结果。 我已经修改了我的mixins，使它们被命名为box-shadow-2或box-shadow-3，以匹配预期的参数数目。 一旦我弄清楚发生了什么/有更好的解决scheme，我会修改我的答案。
这适用于更新的 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
它应该工作得很好。 我以前用过 试试这个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));
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);
.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); }
这个问题是过时的，因为现在你的解决scheme实际上工作。
不过，我会试着解释为什么，因为很多人似乎没有意识到：
实际上，将逗号分隔的参数列表传递给mixin非常简单：只需在mixin调用中使用分号（ ; ）而不是逗号。
从LESS文档 ：
参数是分号或逗号分隔的。 build议使用分号。 符号逗号有双重含义：它可以被解释为一个mixin参数分隔符或者css列表分隔符。 使用逗号作为mixin分隔符使得不可能使用逗号分隔列表作为参数。
分号不具有这样的限制。 如果编译器在mixin调用或声明中看到至less一个分号，则它假定参数用分号分隔。 所有的逗号都属于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); );
请注意，如果（如上所述）只传递一个列表 ，则最后也必须使用分号。
看看我的答案关于多个背景 ，看看mixin调用应该看多个参数，其中一些是逗号分隔的列表。
这是另一个解决scheme（我更喜欢）：
使用e()string函数。 例如： 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
