如何简化这个 LESS CSS Box-shadow 混合器？（带“方向”的多个阴影）

Question

如何减少这段代码（可能使用循环？），以获得一个带有“方向”和“次数”的“函数”？

• @dir =所需的“方向”
• @number =需要阴影的次数（此处为10次）
• @color =阴影颜色

示例（可工作，但不易使用）:

.perspective-box(@dir, @number, @color) when (@dir = se){
   -webkit-box-shadow:1px 1px 0 0 @color,
                      2px 2px 0 0 @color,
                      3px 3px 0 0 @color,
                      4px 4px 0 0 @color,
                      5px 5px 0 0 @color,
                      6px 6px 0 0 @color,
                      7px 7px 0 0 @color,
                      8px 8px 0 0 @color,
                      9px 9px 0 0 @color,
                      10px 10px 0 0 @color;
}

我有一个@dir参数，它可以改变阴影的方向。在这个例子中，我设置了@dir = se，其中se代表南东方向。同样的，也可以使用North West、North East、South West和South East。

如何避免这种情况…？

.perspective-box(@dir, @number, @color) when (@dir = ne){
   -webkit-box-shadow:10x North East shadow…
}

.perspective-box(@dir, @number, @color) when (@dir = nw){
   -webkit-box-shadow:10x North West shadow…
}

.perspective-box(@dir, @number, @color) when (@dir = sw){
   -webkit-box-shadow:10x South West shadow…
}

.perspective-box(@dir, @number, @color) when (@dir = se){
   -webkit-box-shadow:10x South East shadow…
}

- flks

Answer 1

没问题：

.text-shadow-3d(@x, @y, @index) when (@index > 0) {

    // Loop-de-loop.
    .text-shadow-3d(@x, @y, @index - 1);

    // The '+' after 'text-shadow' concatenates with comma.
    text-shadow+: @x*@index @y*@index 0 black;
}


.text-shadow-3d(1px, 1px, 5);

结果：

text-shadow: 1px 1px 0 #000000, 2px 2px 0 #000000, 3px 3px 0 #000000, 4px 4px 0 #000000, 5px 5px 0 #000000;

Docs:

http://lesscss.org/features/#loops-feature

http://lesscss.org/features/#merge-feature

- geon

Answer 2

我几乎可以确定这在LESS中是不可能的，因为它缺少语言结构来实现（我已经有一段时间没有使用LESS了，所以我可能错了）。另一方面，Sass可能能够做到这一点，因为它具有循环和列表等功能（尽管从那里的选项来看，处理可变阴影数量可能会非常丑陋）。

- cimmanon