How to simplify this LESS CSS Box-shadow mixin? (m

Question

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

• @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;
}

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.

How to avoid this…?

.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

I am almost positive this is impossible with LESS because it lacks the language constructs to do so (it's been a while since I used LESS, so I could be wrong). Sass, on the other hand, might be able to do it because it does have loops and things like lists (though looking at the options there, it looks like it might be pretty ugly handling the variable number of shadows).

Answer 2

No problem:

.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);

Result:

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