少混入问题多箱阴影参数(Less mixin issue for multiple box-shad

2019-07-21 14:19发布

我在一个项目工作是我要少用,我个人一直使用手写笔,但我不能用这个项目,所以我的下一个问题。 我怎么能做到这一点,我是用手写笔做,用量少? 问题是参数的个数。

手写笔:

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

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需求,要得到阴影组之间的逗号。



文章来源: Less mixin issue for multiple box-shadow arguments