①ファイル構成
sassファイルにmixinフォルダ、moduleフォルダを作成し、
mixinフォルダに_common.scssファイル
moduleフォルダに_btn.scss、_index.scssを作成します
②それぞれのファイルにコードを記述する
それぞれのファイルに以下のように記述していきます
■_common.scssファイル
よく使うスタイルを「＠mixin」を使って定義する
■_btn.scssファイル
＠mixinを利用するには ＠include を使用します
①ファイルの先頭に＠useを記述してmixin定義ファイルを読み込む
②利用したい場所に＠includeを記述してよく使う定義を呼び出す
■_Index.scssファイル
＠useで_btn.scssを読み込む
■style.scssファイル
＠useでモジュールフォルダを読みこみます
CSS優先度を利用してBEMのブロックを超えて利用するデザインを先に読み込みます
mixinフォルダは定義を管理しているだけのファイルなので読み込みません
③生成されたファイルを確認する
保存するとstyle.cssファイルに_common.scssで記述したコード、
_btn.scssで記述したコードが生成されたことが確認できました
共通したデザインがあるとき＠includeを使うとコンパクトに記述ができます