在：全局和：本地css模块之间切换，以便使用sass混合设置元素动画

我想在使用关键帧和动画时在：全局和：局部之间切换，下面给出的代码有效：

@mixin keyframe ($animation_name, $isGlobal: false) {
  @if $isGlobal {
    @-webkit-keyframes :global(#{$animation_name}) {
      @content;
    }

    @-moz-keyframes :global(#{$animation_name}) {
      @content;
    }

    @keyframes :global(#{$animation_name}) {
      @content;
    }
  }

  @else {
    @-webkit-keyframes #{$animation_name} {
      @content;
    }

    @-moz-keyframes #{$animation_name} {
      @content;
    }

    @keyframes #{$animation_name} {
      @content;
    }
  }
}

@mixin animation (
  $animation_name,
  $duration,
  $isGlobal: false,
  $animation_timing_function: linear,
  $delay: 0,
  $fillmode: forwards,
  $direction: normal,
) {
  @if $isGlobal {
    :global {
      -webkit-animation-name: $animation_name;
      -webkit-animation-duration: $duration;
      -webkit-animation-timing-function: $animation_timing_function;
      -webkit-animation-delay: $delay;
      -webkit-animation-fill-mode: $fillmode;
      -webkit-animation-direction: $direction;

      -moz-animation-name: $animation_name;
      -moz-animation-duration: $duration;
      -moz-animation-timing-function: $animation_timing_function;
      -moz-animation-delay: $delay;
      -moz-animation-fill-mode: $fillmode;
      -moz-animation-direction: $direction;

      animation-name: $animation_name;
      animation-duration: $duration;
      animation-timing-function: $animation_timing_function;
      animation-delay: $delay;
      animation-fill-mode: $fillmode;
      animation-direction: $direction;
    }
  }
  @else {
    -webkit-animation-name: $animation_name;
    -webkit-animation-duration: $duration;
    -webkit-animation-timing-function: $animation_timing_function;
    -webkit-animation-delay: $delay;
    -webkit-animation-fill-mode: $fillmode;
    -webkit-animation-direction: $direction;

    -moz-animation-name: $animation_name;
    -moz-animation-duration: $duration;
    -moz-animation-timing-function: $animation_timing_function;
    -moz-animation-delay: $delay;
    -moz-animation-fill-mode: $fillmode;
    -moz-animation-direction: $direction;

    animation-name: $animation_name;
    animation-duration: $duration;
    animation-timing-function: $animation_timing_function;
    animation-delay: $delay;
    animation-fill-mode: $fillmode;
    animation-direction: $direction;
  }
}

但正如您所观察到的，许多代码行似乎在重复。我尝试了一种减少重复的方法，但在代码本地化时似乎不起作用：

@mixin keyframe ($animation_name, $isGlobal: false) {
  $updated_animation_name: $animation_name;

  @if $isGlobal {
    $updated_animation_name: (:global(#{$animation_name}));
  }

  @-webkit-keyframes #{$updated_animation_name} {
    @content;
  }

  @-moz-keyframes #{$updated_animation_name} {
    @content;
  }

  @keyframes #{$updated_animation_name} {
    @content;
  }
}

---

有没有一个解决方案来最小化代码行？感谢期待中的

@mixin关键帧
，您可以这样做：

@mixin keyframe ($animation_name, $isGlobal: false) {
  @if $isGlobal {
     $animation_name: #{':global('+$animation_name+')'};
  }

  @-webkit-keyframes #{$animation_name} {
     @content;
  }

  @-moz-keyframes #{$animation_name} {
     @content;
  }

  @keyframes #{$animation_name} {
     @content;
  }
}

您可以通过循环添加前缀对其进行进一步优化：

@mixin keyframe ($animation_name, $isGlobal: false) {
  @if $isGlobal {
    $animation_name: #{':global('+$animation_name+')'};
  }

  @each $prefix in moz, webkit {
    @-#{$prefix}-keyframes #{$animation_name} {
      @content;
    }
  }

  @keyframes #{$animation_name} {
    @content;
  }
}

对于第二种情况，您可以做的第一件事是使用autoprefixer mixin，例如：

然后将其包含到
@mixin动画中
：

@mixin animation (
  $animation_name,
  $duration,
  $isGlobal: false,
  $animation_timing_function: linear,
  $delay: 0,
  $fillmode: forwards,
  $direction: normal
) {
  @if $isGlobal {
    :global {
      @include prefix((
        animation-name: $animation_name,
        animation-duration: $duration,
        animation-timing-function: $animation_timing_function,
        animation-delay: $delay,
        animation-fill-mode: $fillmode,
        animation-direction: $direction
      ), webkit moz);
    }
  }
  @else {
    @include prefix((
      animation-name: $animation_name,
      animation-duration: $duration,
      animation-timing-function: $animation_timing_function,
      animation-delay: $delay,
      animation-fill-mode: $fillmode,
      animation-direction: $direction
    ), webkit moz);
  }
}

它起作用了。我只需要从
@-{$prefix}-关键帧{$animation\u name}
中删除
@
。这给了我一个错误。其余的工作完美无缺。非常感谢，真的吗？我很惊讶它会给你一个错误，因为它在我这边编译。如果有帮助，我很高兴！哦，好吧！我不知道为什么，但它不接受
@
@mixin animation (
  $animation_name,
  $duration,
  $isGlobal: false,
  $animation_timing_function: linear,
  $delay: 0,
  $fillmode: forwards,
  $direction: normal
) {
  @if $isGlobal {
    :global {
      @include prefix((
        animation-name: $animation_name,
        animation-duration: $duration,
        animation-timing-function: $animation_timing_function,
        animation-delay: $delay,
        animation-fill-mode: $fillmode,
        animation-direction: $direction
      ), webkit moz);
    }
  }
  @else {
    @include prefix((
      animation-name: $animation_name,
      animation-duration: $duration,
      animation-timing-function: $animation_timing_function,
      animation-delay: $delay,
      animation-fill-mode: $fillmode,
      animation-direction: $direction
    ), webkit moz);
  }
}