mixinでエラー発生!!importの順番に問題あり

mixinとは?

@mixinで定義したスタイルを@includeで呼び出せるというものです。

よって、よく使うスタイルを@mixinで定義しておけば、何度でも@includeで呼び出せるのですっきりしたコードを書くことができます。

実際にコードを書いてみる

mixin用のファイルを作成して、コードを書いてみます。

mixin.scss

@mixin h2style {
  text-align: center;
  padding-top:50px;
  font-size:50px;
}

こんな風に定義して

_game_index.scss

h2{
    @include h2style;
  }

でスタイルを反映させる...

ところがエラーが発生。

mixinでスタイルを設定完了のはずがエラーが発生してしまいました。

原因はimportの順番にありました。

application.scss

@import "./reset";
@import "modules/game_index";
@import "modules/mixin";

コードは基本的に上から読み込まれます。以上の記述だと、game_indexがmixinよりも上で記述されているため、エラーが発生しました。

よってimportの順番を変えてあげましょう。

application.scss

@import "./reset";
@import "modules/mixin";
@import "modules/game_index";

これで、エラーはなくなります。何ら問題なくmixinでスタイルを定義させることに成功しました。