[Web][SCSS]animationのmixinがGulp3→Gulp4に上げた時sassコンパイルできない問題

この記事は 2020年12月2日に投稿されました。
内容が古いかもしれません。ご注意ください。
※最後に更新されたのは 2020年12月9日です。

同じような人がいるかはわからないですが多分ニッチなやつなので備忘録。

Gulp3でこういうmixinをずっと使っていたけどGulp4に上げたらコンパイルできず、なんかわからんが表示崩れ（animationを使っている箇所が全滅）という面倒な目に遭いました。

変数の書き方がだめです。

@mixin animation( $name ){
  @-webkit-keyframes $name {
    @content;
  }
  @-o-keyframes $name {
    @content;
  }
  @-moz-keyframes $name {
    @content;
  }
  @keyframes $name {
    @content;
  }
}

改善版

こっちなら動きます。

@mixin animation( $name ){
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-o-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}