2020年3月からプログラミングを始めたジュンです。
超初心者が自分なりに理解できたことを記事にしていきます。
ぜひ、理解の間違っている点などがございましたら、ご指摘お願いします！

Sass内で使える　@mixin　の使い方

まずSassとは
↓
takashiさんの記事がわかりやすいのでこちらをご覧ください！

簡単に解釈すると
CSSを簡潔に書くことができるCSSを拡張した言語のようです！

学習記録

わかりやすい教材を作られた方々ありがとうございます。
勉強させていただいた教材を紹介させていただきます。

SassをUdemyのこちらの講座で初めて触れ、
【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底入門（フロントエンド編）

その後、復習を兼ねてProgateでSassⅠを学習しました！
Progate SassⅠ

本題です

@mixinとは、Sass言語の特徴としてある「CSSを簡潔に書く」ために使うことができます！

@mixinを使うのに適した例で説明していきます。
CSSのプロパティにanimationが頭につくプロパティがたくさんあります。
しかも、アニメーションをつけたいときにはanimationが頭につくプロパティをたくさん使わなければいけません。
毎回書くのは大変です。。。

animation-duration:1s;animation-timing-function:ease;animation-delay:1s;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode:both;

CSSにこのコードを毎回書いたり、コピーするのは大変ですし、変更する際にわかりにくいです。

Sassで@mixinを使ったら

@mixinanimation($duration:1s,$timing-function:ease,$delay:1s,$iteration-count:infinite,$direction:alternate,$fill-mode:both){animation:{name:$name;duration:$duration;timing-function:$timing-function;delay:$delay;iteration-count:$iteration-count;direction:$direction;fill-mode:$fill-mode;}}

初見で私は何が何だかわかりませんでした。
しかも、多くなってる。。。

最後まで見ていただくと、簡潔にコードを書くことができる理由がわかります！
少しずつ説明すると、
1.@mixinの後には省略したいプロパティ名の共通する頭の単語を書く。

@mixinanimation(){}

2.()内には引数を取ることができるので共通する頭の単語の後に続くプロパティ名を$マークを頭に置いて書く。（複数あるため","で区切って書いていく。）

@mixinanimation($duration,$timing-function,$delay,$iterarion-count,$direction,$fill-mode){}

3.2の$〇〇にはデフォルトで与えたい値を入力する。

@mixinanimation($duration:1s,$timing-function:ease,$delay:1s,$iteration-count:infinite,$direction:alternate,$fill-mode:both){}

4.{}内には$〇〇(=変数)をプロパティに代入する。(animation:{}とすることで、ここでも頭の文字を省略して書いていくことができます！)

@mixinanimation($duration:1s,$timing-function:ease,$delay:1s,$iteration-count:infinite,$direction:alternate,$fill-mode:both){animation:{duration:$duration;timing-function:$timing-function;delay:$delay;iteration-count:$iteration-count;direction:$direction;fill-mode:$fill-mode;}}

これで先ほどの例と同じものができました。

では次にどうやって@mixinでまとめたものを呼び出したらいいかを説明します。

@mixinを呼び出すには

@mixinでまとめたものは@includeを使って呼び出します。

@includeanimation($duration:1.4s,$timing-function:ease-in-out,$delay:2s,$iteration-count:1);

1.@mixinでまとめたものを適用させたいタグやクラスの中に@include関数名()を書く。

div{@includeanimation();}

2.@mixin内で与えた値を変更したいときは、()内で変数に値を与える。

div{@includeanimation($duration:1.4s,$timing-function:ease-in-out,$delay:2s,$iteration-count:1);}

これで先ほどの例と同じものができました。

@mixinをまとめたファイルを作る

@mixinはまとめておけば楽にコードを書くことができますが、毎回書くのはすごーーーくめんどくさいです。。。
そして結構見た目もごちゃごちゃしてるかも。。。

そこで！
@mixinを_mixin.scssというファイルにまとめて、いつでも楽にすっきり呼び出せるようにしましょう！
1._mixin.scssファイルを作り、@mixinでまとめる。
2.Sassファイルの最上部に@import "mixin";と記述する。

@import"mixin";

3.@includeで@mixinでまとめたものを呼び出す。

@import"mixin";div{@includeanimation($duration:1.4s,$timing-function:ease-in-out,$delay:2s,$iteration-count:1);}

これでOKです！
これなら楽に、すっきりさせることができました！

まとめ

まだまだ勉強不足で@mixinを使うことでコードを書くことが、楽にすっきりさせることができるプロパティ名がanimation~くらいしか思いつかなかったのですが。。
勉強不足ですみません。
プログラミングとはとても合理的で、計算されており、ものすごく頭のいい人が作ったものであると思っているので、このどんなメリットがあるのか、なぜこの演算子が生まれたのか、必要になった理由があると思い勉強していくと理解度が深まるのかなと思いました。

すでにプログラミングを学ばれている方々、改善点、修正点のコメントをお願いします！
プログラミング初心者の方々もわからないところを共有して一緒にスキルアップしていきましょう！