Question

我尝试重写sass mixin用于生成长文本阴影
http://codepen.io/awesomephant/pen/mAxHz
减少混合

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

可以请别人帮我吗？

Answer 1

嗯，简而言之，除了变量和mixin声明之类的基本语言语句之外，SCSS和Less实际上是非常不同的语言。因此，当涉及到诸如可变范围和寿命，迭代和条件结构等更高级的东西时，它们之间没有直接的转换。此外，由于这个特殊的mixin也是＆＃34;意大利面条代码＆＃34;的一个近乎完美的例子，实际上从头开始编写这样的mixin更容易，而不是尝试转换它＆＃34;逐行＃34 ;：

@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不完全兼容，例如：

mixin仅接受未加引号的参数（例如box和true，而不是'box'和'true'）
使用稍微不同的fadeout处理（可能会更好，但请参阅下面的P.P.S.）
不会为fadeout类型禁用text（似乎是不必要的限制）
生成不同的scew尺寸

如果你需要一个精确的克隆，那么你可以做出进一步的修改。

P.S。是的，link到导入的"for"好东西。

P.P.S。顺便说一句，有更好的淡出方法，更自然的结果。见codepen

将“长影”SASS mixin转换为Less

1 个答案: