Sassではいろんな便利機能が用意されています。そのうちの1つである「mixin」機能ですが、これを使いこなすことで、スタイルとして記述するコード量を大幅に減らしたり、共通化されることで改修コストを圧縮できたりします。今回はそのmixinに引数を使うことで、条件別にmixinで出力する内容を切り分けるテクニックをまとめていきたいと思います。   具体的なケースとしては、メディアクエリと特定のスタイルをmixinで定義しており、スクリーンサイズによって、スタイルも切り分けたいという場面になります。例えば、PCとスマホでフォントサイズを切り替えたいという感じですね。その場合は下記のようなコードになるかと思います。 【Sass（SCSS）】

// mixin定義
@mixin text-style-pc {
 font-size: 28px;
}
@mixin text-style-sp {
 font-size: 16px;
}
@mixin media-query-pc {
 @media screen and (max-width: 992px) {
  @content;
 }
}
@mixin media-query-sp {
 @media screen and (max-width: 480px) {
  @content;
 }
}

// mixin呼び出し（include）
@include media-query-pc {
 div {
  @include text-style-pc;
 }
}
@include media-query-sp {
 div {
  @include text-style-sp;
 }
}

  まずはスタイルとメディアクエリを「@mixin」として定義します。ちなみにですが、mixinを使った複雑なメディアクエリの管理方法については過去記事「Sassのマップ変数を活用して複雑なメディアクエリを一括で管理する」にて詳しくまとめていますので是非こちらもご参考ください。上記はサンプルなのでシンプルなメディアクエリにしています。   定義したmixinは「@include」で呼び出して使うのですが、スタイルの数が増えてきた場合にmixinが大量に作成されてしまうことになります。複雑になると管理するのも大変なので、1つにまとめておきたいところですね。そんな時にはmixinに引数をつけて、mixin内で引数をとった条件分岐を設定するようにして、そこに条件別のスタイルを記述していくと1つのmixinにまとめることができます。   下記は具体的なサンプルになりますが、引数にメディアクエリを判別するフラグを変数として格納しておきます。そのmixin内で、引数を取って「@if・@else」で条件分岐させて、メディアクエリごとのスタイルを記述していきます。 【Sass（SCSS）】

@mixin text-style($isMobile) {
 @if ($isMobile) {
  font-size: 28px;
 }
 @else {
  font-size: 16px;
 }
}

  こうすることでmixinが1つにまとめられ、見た目もスッキリしたのとコードの見通しもかなり良くなりましたね！もちろん「@else if」の形で2通り以上の条件分岐に対応させることも可能です。そしてこのmixinをincludeで呼び出す際に引数に対応する値を入れることで、条件分岐として切り分けたスタイルを適用させることができるようになります。 【Sass（SCSS）】

@include media-query-pc {
 div {
  @include text-style($isMobile: false);
 }
}
@include media-query-pc {
 div {
  @include text-style($isMobile: true);
 }
}

  実際にコンパイルすると、下記のように出力され、本来のメディアクエリ別に切り分けられたスタイルが適用できているのが確認できますね。 【CSS（コンパイル後）】

@media screen and (max-width: 992px) {
 div {
  font-size: 28px;
 }
}
@media screen and (max-width: 480px) {
 div {
  font-size: 16px;
 }
}

  今回あげている、mixinの引数を使った条件分岐のサンプルは下記に用意していますので、一度確認してみてください。  

See the Pen conditional_using_arguments_mixin by designsupply (@designsupply) on CodePen.

  Sassではmixinの中にmixinを入れるという入れ子の構造はできないので、mixin内で内容を切り分けたい場合には引数を使った条件分岐をすることで実現することができます。複雑なスタイルになってくるとメリットは大きくなるので、使える場面では是非試してみてはいかがでしょうか。