Convert "long shadow" SASS mixin to Less

I am trying to rewrite sass mixin to generate a long text shadow

http://codepen.io/awesomephant/pen/mAxHz
to a smaller mix

.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 does not work.
I get an error even on 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 : ''; 

Could someone please help me with this?

+4
source share
1 answer

, , , mixin, SCSS Less . , , , .., . , mixin " ", mixin , " ":

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

. codepen. , :

  • mixin (, box true 'box' 'true')
  • fadeout ( , , . P.P.S.)
  • fadeout text ( )
  • scew

, .

P.S. , "for" .

P.P.S. , . codepen

+5

Source: https://habr.com/ru/post/1541129/


All Articles