将“ Long Shadow” SASS混合转换为Less

小编典典

将“ Long Shadow” SASS混合转换为Less

css

我尝试重写sass mixin以生成较长的文本阴影

以减少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;}
}

但这不起作用。
即使在第一行也出现错误

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 : '';

可以请人帮我吗？

阅读 501

2020-05-16

共1个答案

小编典典

好吧，简而言之，除了变量和混合声明之类的非常基本的语言语句外，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);
}

。它与原始的mixin不完全兼容，例如：

mixin仅接受未加引号的参数（例如boxand true代替'box'and 'true'）
使用稍微不同的处理方式fadeout（可能会更好，请参见下面的PPS）
不禁fadeout用该text类型（似乎有不必要的限制）
产生不同的scew大小

因此，如果您需要精确的克隆，则取决于您进行进一步的修改。

PS是的，并链接]到进口的"for"糖果。

PPS顺便说一句，有更好的淡出方法，效果更自然。

2020-05-16