如何简化这个LESS CSS框阴影混合？ （具有“方向”的多个阴影） [英] How to simplify this LESS CSS Box-shadow mixin? (multiple shadows with "directions")

问题描述

如何减少这个代码（可能有一个循环？），有一个函数，它接受方向和数字？

How to reduce this code (probably with a loop ?), to have a "function" which takes direction and number?

• @dir =所需的方向


• @number


• @color =阴影的颜色

• @dir = the wanted "direction"
• @number = how many times I need a shadow (here 10 times)
• @color = color of the shadow

（工作，但不是很容易使用）：

Example (working, but not very easy to use) :

.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 =东南。这对于西北，东北，西南和东南是一回事。

I have a @dir param which change the direction of shadows. In this example, I put @dir = se, where se = South East. This is the same thing for North West, North East, South West and 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…
}

推荐答案

：

.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

这篇关于如何简化这个LESS CSS框阴影混合？ （具有“方向”的多个阴影）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！