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

投稿日：2020/12/02
最終更新：2020/12/09

この記事は 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;
  }
}