Sassの@mixinと@functionの基本を押さえたい

こんにちは、新人フロントエンジニアとして働いている者です。
Sassで自作の**@mixinや@functionを作ったことがなく、そろそろ勉強しないとやばいなと思ったので、ここでアウトプットします。
##@mixinって何だ？
@mixinはよく利用するCSSのスタイルを定義して、他の場所でも使いまわせるようにする機能**のことです。
@mixin　名前で定義して@include　名前で呼び出します。

@mixin hoge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 100px;
  margin-top: 20px;
  background-color: #000;
  color: #fff;
 }

.example1 {
  @include hoge;
}

###引数が使える
mixinでは引数が使えるので、関数的な使い方も可能です。
引数の初期値も$引数名: 初期値の形で設定できます。

@mixin hoge($bgColor: #000, $fontColor: #fff) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-top: 20px;
  background-color: $bgColor;
  color: $fontColor;
 }

.example1 {
  @include hoge();
}

.example2 {
  @include hoge(green, black);
}

###可変長引数も使える
@mixinでは可変長引数も使えます。
値に,が含まれる場合には可変長引数の出番です。

//可変長引数を使う
@mixin hoge($font-family...) {
  font-family: $font-family;
}

.exmaple-text {
  @include hoge(Arial, Helvetica, sans-serif);
}

()で囲んで値を渡すという方法もあります。

@mixin hoge($font-family) {
  font-family: $font-family;
}

.example-text {
  //()で囲んで値を渡す
  @include hoge((Arial, Helvetica, sans-serif))
}

###実践
@contentと変数を組み合わせて、メディアクエリを管理してみます。

• map-get...map-get(map名, key名)の組み合わせで、mapの中からkeyに対応した値が取り出せる。
• @content...mixinにコンテントブロックを渡せる。
• #{}...通常エラーになってしまう処理を書ける。**#{}**に入れたものを素のCSSとして扱って欲しい時に使う。

See the Pen mixin example3 by Tsuyoshi Takeuchi (@hanatsuyo) on CodePen.

## @functionってなんだ @functionはその名のとおり、**自作関数を作れる機能**です。 @mixinと比べると使用頻度は減るかもしれませんが、コーディングの幅が広がるので覚えておいて損はないです。 ###引数が使え、@returnで結果を返す 関数なので当たり前ですが、@mixin同様に引数が使えます。 `@関数名($引数名1:初期値, $引数名2:初期値)`というフォーマットで利用でき、`@return`で結果を返します。 以下の例ではdouble関数を作って、受け取った値を2倍にしてpxで返しています。

@function double($px: 50) {
  @return $px * 2px; 
}

.example1 {
  height: double(200);
  // => 400px
}

.example2 {
  height: double();
  // => 100px
}

###可変長引数も使える
@mixin同様に可変長引数が使えます。
使い方は@mixinと同じです。　

//渡された値の合計値をpxで返す関数
@function my-sum($values...) {
  $sum: 0;
  @each $x in $values {
    $sum: $sum + $x;
  }
  @return $sum * 1px;
}

.example {
  width: my-sum(20, 30, 40);
  height: 100px;
}

また同様に()で囲むことで,で区切られた値を渡せます。

@function my-sum($values) {
  $sum: 0;
  @each $x in $values {
    $sum: $sum + $x;
  }
  @return $sum * 1px;
}

.example {
  //()で囲んで渡す
  width: my-sum((20, 30, 40));
  height: 100px;
}

###実践
実践として親要素に合わせて横幅をパーセントで計算してくれる関数を作ってみましょう。

See the Pen function example2 by Tsuyoshi Takeuchi (@hanatsuyo) on CodePen.

##最後に ざっと@mixinと@functionについてまとめてみました。 コーディングでよく使うような処理を@mixinや@functionとしてまとめておくと、開発効率の上昇につながります。 よく使う@mixinと@functionのスニペットを公開している方がいたので参考にしてみてください！ [よく使うSassのmixinとfunctionのスニペットをまとめてみた](https://zenn.dev/tak_dcxi/articles/2cc1828e9c1fe2)

最後まで読んでいただきありがとうございました

##参考サイト
@contentを使って、@mixinにスタイルセットを渡す
Sassの基礎、@mixin（ミックスイン）の使い方
Sassの変数とmixinで変更に強いメディアクエリをつくる
よく使うSassのmixinとfunctionのスニペットをまとめてみた
自作関数を定義する @function
Sassで@mixinを作る時に知っておきたい基礎知識
関数を定義する