3

我在一个项目中工作，如果我必须少用，我个人总是使用手写笔，但我不能用这个项目，所以我有下一个问题。我怎么能做到这一点，我用手写笔做的，用更少的？问题是参数的数量。

在手写笔中：

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);
}
4

1 回答 1

10

现在少

当前版本的 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 需要它来获取影子组之间的逗号。

于 2013-03-14T10:11:16.740 回答