ロゴ画像 HOME

ブログ

HOME > ブログ記事一覧 > [Web][SCSS]animationのmixinがGulp3→Gulp4に上げた時sassコンパイルできない問題

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

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

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

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