Converting “Long Shadow” SASS mixin to Less

问题

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

.long-shadow(@type, @color, @length, @fadeout: true, @skew: false, @direction: right){


 @shadow : '';
  .if @skew == false or @type == text{
    .if @direction == right {@
      @for @i from 0 to @length - 1 {
        @shadow: @shadow + @i + 'px ' + @i + 'px 0 ' + @color + ',';
      }
    }
    .if @direction == left {@
      @for @i from 0 to @length - 1 {
        @shadow: @shadow + @i * -1 + 'px ' + @i + 'px 0 ' + @color + ',';
       }
      }
     }

   .if @fadeout == true{
    @for @i from 1 to @length - 1 {
      .if @type == text or @skew == false{
        .if @direction == right{
          @shadow: @shadow + @i + 'px ' + @i + 'px 0 ' +       rgba(@color, 1 - @i / @length) + ',';
        }
        .if @direction == left{
          @shadow: @shadow + @i * -1 + 'px ' + @i + 'px 0 ' +       rgba(@color, 1 - @i / @length) + ',';
        }
      }
      .if (@type == box) and @skew == true{
        .if @direction == right {
          @shadow: @shadow + @i + 'px ' + @i + 'px 0 ' + @i * .2 + 'px ' + rgba(@color, 1 - @i / @length) + ',';
        }
        .if @direction == left {
          @shadow: @shadow + @i * -1 + 'px ' + @i + 'px 0 ' + @i * .2 + 'px ' + rgba(@color, 1 - @i / @length) + ',';
        }
      }
  }
  @shadow: @shadow + @length + 'px ' + @length + 'px 0 ' + rgba(@color, 0);
 }
 .if @fadeout == false{
   .if @skew == true and ( @type == box ){
     @for @i from 0 to @length - 1 {
            @shadow: @shadow + @i + 'px ' + @i + 'px 0 ' + @i * .1 + 'px ' + @color + ',';
      }
   }
    @shadow: @shadow + @length + 'px ' + @length + 'px 0 ' + rgba(0,0,0,0);
 }
 @shadow: unquote(@shadow);
  .if @type == 'box' {box-shadow: @shadow;}
  .if @type == 'text' {text-shadow: @shadow;}
} 

but it doesn't work.
I get an error even at the first line

ParseError: Unrecognised input
in style.less on line 2255, column 13:

2254
2255.long-shadow(@type, @color, @length, @fadeout: 'true', @skew: 'false', @direction: 'right'){
2256  @shadow : ''; 

Can please someone to help me with it?

回答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

来源：https://stackoverflow.com/questions/23738798/converting-long-shadow-sass-mixin-to-less