Question

我做了一个相当漂亮的链接效果，我希望变成一个混合或功能，但我无法围绕如何构建它。搜索到处都是，但我无法组装拼图。

输出应如下所示

{
  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）。这甚至可能吗？

Answer 1

您是否尝试SASS-maps呈现声明？例如：

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

然后在你的mixin中使用@each指令：

@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：

@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。请参阅Passing css property:value into a mixins argument上的示例。

高级SCSS / SASS mixin / function

1 个答案: