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

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箱阴影。我有以下mixin：

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

我试图这样：

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

这在正常的CSS3中工作，但从LESS文件运行时失败。我在某处读到，分离两个阴影的逗号是什么导致了LESS解析器中的问题。

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

解决方法

最好的解决方案是对每个阴影数量进行单独的重载。 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,@shadow3;
    -moz-Box-shadow: @shadow1,@shadow3;
    Box-shadow: @shadow1,@shadow3;
}

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

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

编辑：

好的，我还在学习LESS，但是它似乎在某些情况下会混合所有的重载，而不是最适用的参数列表，所以你可能会得到不同的结果。我以前修改了我的混合，使它们命名为Box-shadow-2或Box-shadow-3，以匹配预期的参数数量。我会修正我的答案，一旦我弄清楚发生了什么/有一个更好的解决方案。

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

Read This

解决方法

猜你在找的CSS相关文章