SCSSの@mixinと@functionの違いと使い方

こんにちは、むったん（@6ttan）です。

cssを書きながら「あれ…文字の色コードなんだっけ」とか「ここの計算式なんだっけ…」とか日常茶飯事な私です。
そんな私を助けてくれるのがSassの変数($)やスタイルの定義と引数(@mixin)なのですが…

先日、頭の数字が異なるだけで永遠と同じ計算式のcssを書いていた事に気づきました。
そんな時に使えた関数(@function)について今回はお話ししていきます。

2つの違いについて

まずCSSはセレクタ、プロパティ、値の3つで構成されています。

これを元にmixinとfunctionでは、どれを指定できるのか見ていきましょう。

mixinとは

よく利用するプロパティ、値を定義して、複数のセレクタで使いまわせるようにできる機能です。
@mixin hogeで定義して@include hogeで呼び出します。

また引数も使用できるので、値が変わるものなどにも柔軟に対応できます。

詳細は使い方例にて紹介します。

functionとは

よく利用する値や自作関数を通して結果を返してくれる機能です。

mixin同様に引数が使用できますので、自作関数の自由度は無限大です。
@returnで結果を返してくれます。

こちらも詳細は使い方例にて紹介します。

2つの使い方の例

ざっくり違いをお話ししたところで、実際のコードを見ていきましょう！

mixinの使い方例

私はブレイクポイントの指定をよく使用しています。

/*　変数でブレイクポイントを設定　*/
$breakpoints: (
  'sm': 'screen and (max-width: 767px)',
  'md': 'screen and (max-width: 1000px)',
  'xl': 'screen and (min-width: 1280px)',
);

/* mixinで定義 */
@mixin mediaQuery($breakpoint: sm) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/* 再利用① */
@include mediaQuery {
  section {
    color: #333;
  }
}

/* 再利用② */
@include mediaQuery(md) {
  section {
    color: #fff;
  }
}

コメントの通りなので、説明は省略しますが…
再利用①の部分では定義する部分で$breakpoint: smとした事で標準はsmとなり、省略しています。
なので、この部分で〜767pxのレスポンシブ対応のスタイルを書いていきます。

再利用②の部分ではmqとし、〜1000pxのレスポンシブ対応のスタイルが反映されます。

その他にもPhotoshop等からコーディングする際、文字間（letter-space）はいくつで割ればいいんだっけ…となるので（笑）

/* mixinで定義 */
@mixin letterSpace($space) {
  letter-spacing: calc(#{$space} / 100);
}

p {
  @include letterSpace(14em);/* 0.14em */
}

というような使い方をしています。

段落と段落の間に余白を付ける際、行間を踏まえて計算しなくてはいけない時とか…
画面幅に応じてフォントサイズを相対的に変更しなくてはいけない時とか…

電卓を叩かなくて済むので、とても助かっています！

functionの使い方例

最近functionの便利さに気付いて、ゴリゴリ使ってます。
こちらも計算での使用が多めなのですが

/* functionで定義 */
@function calcSize($size, $wHeight：7.5) {
  @return math.div($size, $wHeight);
}

/* top, leftで再利用 */
.btn {
  position: absolute;
  top: calcSize(10vw);/* 1.333vw */
  left: calcSize(30%, 6.5);/* 4.615% */
}

/*　これをfunctionなしで書くと　*/
.btn {
  position: absolute;
  top: math.div(10vw, 7.5);
  left: math.div(30%, 6.5);
}

あれ？そんなに変わらない？

いえいえ、（7.5は使用頻度が多いから引数に登録しておいて）毎度7.5と入力しなくて済みますし
なんなら有能なエディターが関数を覚えてくれて「c」と打つだけで「使う？」って聞いてくれるようになります（笑）

7.5を打つ度に「あと何回同じ数字を入力するんや…」と白目になっていましたが、気持ちがすっごく楽になりました。

functionは値に対しての関数なので、top, leftだけでなくmarginやpadding、widthやheightなどにもゴリゴリ使って先日長いLPをコーディングしました。（実体験）

さいごに

mixinやfunctionを使用する事でコーディングの時短に繋がる訳ですが、関数の命名はチームに伝わるような命名にしましょう。
抽象的すぎるとせっかくの便利な関数も使用してもらえなかったり、後から修正する際も「なんのこっちゃ？」な現象が起きます。

ルールを決めて、その上で楽していきましょ！！

では。