logo标签列表

对于多个box-shadow参数的Less mixin问题

lesscssstylus
3
我正在从事一个项目，需要使用less。个人经验一直使用stylus，但在这个项目中我不能使用它，所以我有下一个问题：如何使用less来完成我使用stylus完成的工作？问题在于参数的数量。
在Stylus中：
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);
}
1个回答
10

现在的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 需要这样做才能获得阴影组之间的逗号。

感谢您的答复。我不知道有一个更新，可以让你使用不同的语法来编写，而不是“〜””。 - kontur
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接