在 :global 和 :local css 模块之间切换，使用 sass mixins 为元素设置动画

Question

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

@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;
  }
}

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

Answer 1

对于 @mixin keyframe，您可以这样做：

@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;
  }
}

对于第二个，您可以做的第一件事是使用自动前缀混合器，例如 this one made by Hugo Giraudel:

@mixin prefix($declarations, $prefixes: ()) {
  @each $property, $value in $declarations {
    @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
    }

    // Output standard non-prefixed declaration
    #{$property}: $value;
  }
}

然后将其包含在@mixin animation中：

@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);
  }
}

在 :global 和 :local css 模块之间切换，使用 sass mixins 为元素设置动画

Switch between :global and :local css modules for animating elements using sass mixins

css

sass

css-animations

scss-mixins