高级SCSS/SASS混合/功能

我制作了一个非常好的链接效果，我很想把它变成一个mixin或函数，但我不知道如何构建它。到处都找遍了，但我无法拼图

输出应如下所示

{
  opacity: 0;
  transform: translateY(3em);

  @keyframes moveUp {
    from {
      opacity: 0;
      transform: translateY(3em);
    } to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .inview ~ & {
    animation: moveUp 1s forwards;

    @for $i from 1 through 20 {
      &:nth-child(#{$i}) {
        animation-delay: (0.1 * $i) + s
      }
    }
  }
}

我当前的尝试（未编译）如下所示：

    @mixin inviewChainAnimation($animationName, $from, $to, $duration, $delay, $count:20) {
        $from;

        @keyframes #{$animationName} {
            from {
                $from;
            }
            to {
                $to
            }
        }

        .inview ~ & {
            animation: #{$animationName} #{$duration} forwards;

            @for $i from 1 through #{$count} {
                &:nth-child(#{$i}) {
                    animation-delay: (#{$delay} * $i) + s
                }
            }
        }
    }

如何使两个对象（$from和$to）通过函数传递。这可能吗？

您是否尝试过呈现声明？例如：

$mapFrom: (opacity: 0, transform: translateY(3em));
$mapTo: (opacity: 1, transform: translateY(0));

然后在mixin中使用每个指令：

@each $key, $value in $from {
  #{$key}: #{$value};
}

但还有另一个问题。如果我尝试解析修改后的mixin，则会出现以下错误：

Error: "20" is not an integer.
    on line 22 of test.scss, in `inviewChainAnimation'
    from line 34 of test.scss

错误发生在此行：

@for $i from 1 through #{$count} {

要解决此问题，请将

{count}

更改为

$count

。

{$delay}

也一样。就这样。以下是最后的工作混音：

@mixin inviewChainAnimation($animationName, $from, $to, $duration, $delay, $count: 20) {
  @each $key, $value in $from {
    #{$key}: #{$value};
  }

  @keyframes #{$animationName} {
    from {
      @each $key, $value in $from {
        #{$key}: #{$value};
      }
    }
    to {
      @each $key, $value in $to {
        #{$key}: #{$value};
      }
    }
  }

  .inview ~ & {
    animation: #{$animationName} #{$duration} forwards;

    @for $i from 1 through $count {
      &:nth-child(#{$i}) {
        animation-delay: ($delay * $i) + s
      }
    }
  }
}

mixin的使用：

.container {
  @include inviewChainAnimation('foo', $mapFrom, $mapTo, .15, .1);
}

---

如果只需要传递一组css属性，可以使用

@content

简化混入。有关示例，请参见。

抱歉，标记的答案无法解决问题，因为有两个属性要传递给mixin。它可以通过使用感谢Rwam来解决，这是正确的，问题和重复问题是不一样的。。。我将试用SASS地图。谢谢…：-）@Matt你什么时候成为Sass方面的专家？@RwamDev如果你觉得还有其他解决方案，你应该把它贴在这个问题上，这个问题被标记为重复的。没有必要标记此问题以使mod重新打开。@RwamDev此问题已关闭，因为其副本未关闭。你不能把答案贴在那里的原因到底是什么？恭喜你回答了一个重复的问题。