SCSSでまとめてkeyframeを使用する方法

あっという間に6月も半ばになりました！

今回は普段SCSSを使用している私がつまづいたkeyframeのSCSSの使い方です。

実際に使用する際に、いろんな方のブログを読んで『方法』を教授いただいているんですが（勝手に）
今回はどうもうまくいかなかったので備忘録としてまとめておきます。

よくご紹介されているのが以下の方法です。

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

@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  -moz-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

でこれを変数をまとめたSCSSに記載(@mixinだけを集めた変数.SCSS的なもの)して、
通常のページに装飾を行っている(page.scss的なもの)に@includeで記載したもののなぜかエラーがでる！

ここのめちゃくちゃ行き詰まりました…。なんでエラー出るんや…。

いろいろ調べてたらこのやり方だとうまくいきました。

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

@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  -moz-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

上記の@mixinのコードを「_keyframe.scss」で完全にSCSS読み込む用のソースに変更します。
で、page.scssで@importさせれば、なんとこれで動きました！

サーバー的なもの？htaccess？そんなこんなが原因でエラーがはくことがあるようで
もし同じことで行き詰まった方がいれば上記の方法を試してみてください！

Share: