Converting “Long Shadow” SASS mixin to Less

Question

I try to rewrite sass mixin for generation long text-shadow
http://codepen.io/awesomephant/pen/mAxHz
to less mixin

.long-shadow(@type, @color, @lengt         


        

Answer 1

Well, in short, beside the very basic language statements like variable and mixin declarations, SCSS and Less are vastly different languages in fact. So when it comes to more advanced stuff like variable scope and lifetime, iterative and conditional structures etc. etc. there's no straight-forward conversion between them. Furthermore, since this particular mixin is also an almost perfect example of "spaghetti code", it is actually much more easy to write such mixin from scratch rather than try to convert it "line by line":

@import "for";

.long-shadow(@type, @color, @length, @fadeout: true, @scew: false, @direction: right) {
    .-() {
        @dir:  1px;
        @offset: 0;
        @s: (.5px * @i);
        @a: (1 - @i / @length);
        @c: fade(@color, (100% * alpha(@color) * @a * @a));
    }
    .-() when (@direction = left) {@dir: -1px}
    .-() when (@type = box)       {@offset: 1}
    .-() when (@scew = false)     {@s: ;}
    .-() when (@type = text)      {@s: ;}
    .-() when (@fadeout = false)  {@c: @color}

    .for(0, (@length - 1)); .-each(@i) {
        .-();
        @x: (@dir * (@i + @offset));
        @y: (1px  * (@i + @offset));
        @{type}-shadow+: @x @y 0 @s @c;
    }
}

usage {
    .long-shadow(text, red,  4, true, false, right);
    .long-shadow(box,  blue, 4, false, true, left);
}

See also this codepen. It is not exactly compatible with the original mixin, for instance:

• the mixin accepts only unquoted parameters (e.g. box and true instead of 'box' and 'true')
• uses slightly different handling of fadeout (could be better though, see P.P.S. below)
• does not disable fadeout for the text type (seems like unnecessary limitation)
• produces different scew size

So it's up to you to make further modifications if you need an exact clone.

P.S. Yep, and the link to the imported "for" goody.

P.P.S. Btw., there's better fading out method with more natural result. See this codepen