多个box-shadow参数的mixin问题

Question

我正在一个项目工作,我必须少用,个人我总是使用手写笔,但我不能用这个项目,所以我有下一个问题.我怎么能这样做,我正在用手写笔做得更少？问题是参数的数量.

在手写笔中:

box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments

.div {
    box-shadow 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)
}

.div2 {
    box-shadow 0 2px 8px rgba(0, 0, 0, 0.3)
}

输出:

.div {
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
}
.div2 {
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

Answer 1

现在很少

当前版本的LESS允许您使用逗号作为列表的分隔符,然后在参数的末尾放置一个分号,以整个事件作为逗号分隔列表传递.所以这现在有效(注意在右括号之前的末尾的额外分号.

.box-shadow(0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2););
                                                                                                                                                                                                        ^here

原始(前LESS 1.3.3)答案

以下是获得相同输出所需的LESS:

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

.div {
    .box-shadow(~"0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)");
}

.div2 {
    .box-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

注意:要做多个阴影.div,需要使用转义字符串将它们作为单个参数传递,这就是为什么第一次使用~" "包围整个参数字符串的原因.如果你只是传递一个阴影,那是没有必要的.LESS需要在阴影组之间获取逗号.