如何简化这个LESS CSS的box-shadow混入？ （用“方向”的多个阴影）(How to

如何减少这种代码（可能与一个循环？），有一个“功能”这需要方向和数量？

• @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 PARAM其更改阴影的方向。 在这个例子中，我把@dir = se ，其中， se =东南。 这是西北，东北，西南和东南同样的事情。

如何避免这种情况...？

.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…
}

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;

文档：

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

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

Answer 2:

我几乎可以肯定这是不可能用较少，因为它缺乏语言构造这样做（它已经有一段时间，因为我用得少，所以我可能是错的）。 萨斯，在另一方面，可能是能够做到这一点，因为它确实有环之类的东西名单（虽然在选项看那里，它看起来可能是很丑陋处理可变数量的阴影）。

文章来源: How to simplify this LESS CSS Box-shadow mixin? (multiple shadows with “directions”)