如何在LESS CSS中创建多个box-shadow值 [英] How do you create multiple box-shadow values in LESS CSS

问题描述

阅读此

有几个正确答案。由于这个问题获得了很多流量，我想我应该跟上最好的答案是（我认为）（基于LESS文档）作为LESS项目

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和I没有能够找到一个修补程序允许多个CSS3箱阴影。我有以下mixin：

---

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:

.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解析器中的问题。

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.

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

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.

推荐答案

是对每个阴影数量分别进行重载。 Less处理正确的重载解析：

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

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

编辑：

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

Ok, I'm still learning about LESS, but it appears that will actually mixin ALL of 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 CSS中创建多个box-shadow值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！