Mixinとは？
ざっくりお伝えすると、書き方の注意は２つ
①
＠mixinで定義を決める
「＠mixin panda（好きな名前）{color:red;みたいな定義}」で書く
＠mixinのscss当てる
「当てたいクラス名{＠include panda(mixinと同じ名前じゃ無いとダメ)；}」
これで＠mixinで書いた定義がまるまるこのクラスに反映されます。
②
Mixinをかくときはあちこちに＠mixinを書くのではなく「_mixin.scss」を作り
その中にまとめてapplicationに＠importをされた方が管理しやすいかと思います。
ちなみにですがmixinを当てたいページより上にmixinのファイルを＠importするだけで下のscssファイルでは＠includeが当たるようになります
例文
こちらはわかりやすいように同じページに「mixin」と「include」を記述しますね
_mixin.scss(例)
// items/new.html// 商品出品ページ@mixindropzone{background-color:#f5f5f5;border:dashed1px#ccc;color:#333;vertical-align:middle;padding:20px;cursor:pointer;padding:40px;position:relative;text-align:center;width:100%;margin:010px0auto;}// 画像詳細ページ@mixinitem{width:60px;height:60px;img{width:60px;height:60px;}}_item-up-to.scss(例)
.dropzone-area{@includedropzone;//必ず末尾にセミコロン『；』を忘れないように気をつけてくださいp{cursor:pointer;}}//中略.box-photo{box-sizing:border-box;width:300px;height:420px;margin-right:20px;&__photo{width:300px;height:420px;font-size:0;img:nth-child(1){width:300px;height:300px;}img{@includeitem;}}}＠include終わりのセミコロン(;)こんなやつすごい大事！！
参照ぺージ
クリエイターボックス
Sassで@mixinを作る時に知っておきたい基礎知識
終わりに
本当の初心者が真似っこでできるのを目指して書きました。
参照ページ載せますが、記述方法プラスOverwriteしたりと
もっともっと便利なサイトはございますので、慣れましたらぜひご活用ください。
mixin以外の定義方法が参照ページには載ってますが
定義となる部分範囲が異なっていたり、ケースバイケースで
より効率の良い使い方の実例となっておりますので
一緒に学んでいけたらと存じます。
わたくし自身初学者のため
、不備やアドバイス等がございましたらご指摘いただけますと、これ喜びわっしょいでございますので、どうぞよろしくお願いいたします。
最後までご覧いただき
ありがとうございます。