SCSSのmixinが優秀すぎたのでまとめます。

マークアップをしていると
この記述さっきも使ったなー
同じこと何度も書いていて面倒だな・・・っと
同じことの繰り返しになるとすぐに面倒だと思ってしまう。
そんな時にSCSSのmixinを使うと一気に楽になります。

SCSSとは

共通の色や数値などを定義しておくことができて
同じ修飾を使い回すときは定義した変数を呼び出してあげれば
使用できます。
また引数を使うこともできるのでちょっとやってみます。

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

例えばこのような赤いログインボタン
いろんなページで使い回す予定があるので共通化したい。
まずはstylesheetフォルダにmixin.scssというファイルを作成します。
application.scssに@importの記述を忘れずに書いておきます
（ここよく忘れる）

app/assets/stylesheets/application.scss

@import "config/mixin.scss";

mixinファイルの中に以下の記述をします。

../stylesheets/config/mixin.scss

@mixin btn($color) {
 background-color: $color;
 color: white;
 border: 1px solid $color;
 display: block;
 width: 100%;
 line-height: 48px;
 font-size: 14px;
 border-radius: 4px;
 cursor: pointer;
 margin-top: 32px;
 text-decoration: none;
}

次は使いたい場所でincludeしてあげれば呼び出せます。

.red-btn {
 @include btn(red);
}

@includeの後にある「btn」ここにボタンの修飾情報が詰まっています。
そしてさらに便利なことに引数が使えてしまうんです。
上記のコードにも引数を使っています。

@mixin btn($color)

この＄colorが仮引数となり

@include btn(red);

btn（red)が実引数となります。
今回の例では
background-color
boderに対して引数を設定したので
呼び出しがわの実引数の色を変更したら好きな色のボタンにできる
という仕様になっています。
実際に変更してみます。

.red-btn {
 @include btn(green);
}

こんな感じで簡単に呼び出すことができて
色もすぐに変えることができます。
この機能を使うことにより、チーム開発時に統一されたデザインになり
見やすいサイト作成ができそうです。

デフォルト値の設定

仮引数に対して

@mixin btn($color:red)

こうすることにより何も設定しない状態では赤色のボタンになります。
mixinには他にも便利な機能がたくさんあるので
『mixin scss』で調べてみてください。

仮引数と実引数について

こちらのRuby備忘録にまとめてあるので
興味のある方はご覧ください。
https://note.com/john01/n/n4303d13af36e

ここまで読んでいただきありがとうございます。
自分の備忘録兼初学者の方の参考になればと思い
丁寧に書いていますが、事実と違う情報がありましたら
指摘していただけると幸いです。