Sassの@mixinでスタイル指定を効率化！ブレイクポイントの具体例で使い方とメリットを確認しよう

「Sassの@mixinって何？　使うと何ができるの？」

Sassには@mixinという関数を作る機能があります。

@mixinは、Sassの中でも理解が難しいところ。

@mixinを制するものはSassを制するといっても過言ではありません。

この記事では、図解と具体例を交えて@mixinについて解説をしています。

ぜひ一緒にSassマスターを目指しましょう！

山田ねこ

現役システムエンジニアの山田ねこが解説します！

この記事ではSCSS記法を使用します

SassにはSASSとSCSSの2つの記法が存在します。

この記事ではよりCSSに近く分かりやすいSCSS記法を使用します。

2つの記法の違いについては、下記の記事を確認してください。

あわせて読みたい

Sassって何？という人向け超基本まとめ～記法から導入まで～ SassはCSSを拡張したスタイルシート言語です。Sassを使うと開発時のスタイル指定を効率化することができます。このページでは、Sassの記法から導入の仕方までを説明しています。

Sassの@mixin(ミックスイン)とは

@mixinはミックスインと読みます。

Sassの@mixinとは、Sassで使える関数のことです。

関数は、繰り返し記述する内容を効率的に記載するための仕組みです。

@mixinを使うと、繰り返し使いたいスタイルを簡単に再利用することができます。

Sass全体についての説明は、下記の記事を参照ください。

あわせて読みたい

Sassって何？という人向け超基本まとめ～記法から導入まで～ SassはCSSを拡張したスタイルシート言語です。Sassを使うと開発時のスタイル指定を効率化することができます。このページでは、Sassの記法から導入の仕方までを説明しています。

@mixinの基本的な使い方

@mixinは@includeとセットで使います。

それぞれの役割は下記の通りです。

具体例：@mixinでブレイクポイントを制御する

「@mixinって関数が作れるんだ！ でも、具体的にどう書いたらいいかまだ理解できない……」

確かに、具体例がないと理解しづらいと思います。

ここからは、ブレイクポイントの制御を例に説明します。

実際の開発でも@mixinを使ってブレイクポイントを制御する機会は多いよ！

@mixinの具体的な書き方をしっかり確認していきましょう！

制御したいブレイクポイント

今回の例では、以下の表のブレイクポイントを制御していきます。

※今回のブレイクポイントは、Tailwind CSSに合わせています。

@mixinを使わない場合

@mixinのメリットを実感するために、@mixinを使わない場合を確認していきましょう。

@mixinを使わない場合、下記のようにブレイクポイントごとのスタイルを指定する必要がありますよね。

@media (max-width: 640px) {
// 小さい画面用のスタイル
}
@media (min-width: 768px) {
// 中画面用のスタイル
}
@media (min-width: 1024px) {
// 大画面用のスタイル
}
@media (min-width: 1280px) {
// 特大画面用のスタイル
}
@media (min-width: 1536px) {
// 超特大画面用のスタイル
}

都度@media～と記述をする必要があります。

max-widthにするのか、min-widthにするのかなど、細かな部分でミスが起こってしまいそうですよね。

Sassではファイルの分割をすることができますが、ファイルによってブレイクポイントのサイズがずれるなんてことも起こりそうです。

スタイルが複雑になっていくほど、管理が難しくなってしまうね。

@mixinを使った場合

では、@mixinを使うとどのように改善できるのかを見ていきましょう。

$breakpoint: (
  sm: '(max-width: 640px)',
  md: '(min-width: 768px)',
  lg: '(min-width: 1024px)',
  xl: '(min-width: 1280px)',
  2xl: '(min-width: 1536px)',
);

@mixin mq($bp) {
  @media #{map-get($breakpoint, $bp)} {
    @content;
  }
}

_mixin.scssの中身を解説します。

変数の作成

$breakpointという変数を作成しています。

ここでは、変数の中身をsm～2xlまでのキーと値を持つ配列にしています。

Sassではこのような配列のことをmapと呼びます。

@mixin

@mixinは関数の宣言です。

ここでは、mqという名前で、$bpを引数として受け取る関数を宣言しています。

map-get

map-getはmapからキーを元に値を取り出すための関数です。

下記の形式で記載します。

map-get(map , 取り出したいキー)

この場合、取り出したいキーとして、@mixinの引数と同じ$bpを指定しているので、引数を元に、値の取り出しを行います。

例えば、mixinの引数にmdを指定した場合、screen and (min-width: 768px)が取り出されます。

#{}は関数の結果を展開するための記載です。

今は「関数を使って値を出したい場合は、#{}を一緒に使う」という理解で大丈夫です。

@content

@contentと記載すると、@mixinを呼び出すときに中身を自由に指定することができます。

作成した@mixinを別のファイルから呼び出してみましょう。

@use 'mixin' as *;

body {
    background: #ffffff;
    @include mq(md) {
      background: #000000;
      color: #ffffff;
    }
}

style.scssの中身を解説します。

@use

@useを使うことで、ファイルの中でmixinを使えるようにしています。

as *とすると、上の例のように、mixin.scssの中で定義した名前のまま@mixinを呼び出せます。

例えば、as mにすると、m.mq のように、関数の名前の前に、asで定義した別名を指定して@mixinを呼び出します。

複数ファイルにmixinを分割して管理する場合は、別名を指定しておくと分かりやすいです。

@include

@mixinで定義した関数は、@includeで呼び出します。

下記の形式で記載します。

@include 関数名(引数) {
 // @contentに展開したい内容
}

@mixinの中で@contentを記載しておくと、{}の中身を渡すことができます。

上記の例だと、background: #000000;color: #ffffff;が@mixinの中の@contentに展開されます。

@mixinを使った場合のメリット

@mixinを使った場合のメリットとして、次の3点があげられます。

1. 繰り返し記載する内容を、効率的に書くことができる。
2. 記載の誤りが減る。
3. 変更に強い記載ができる。

繰り返し記載する内容を、効率的に書くことができる

@mixinを呼び出したい箇所に@includeを書くだけで繰り返し記載する内容を簡単に呼び出せます。

こうすることで、記載が効率化されます。

記載の誤りが減る

@mixinを定義しておくことで、同じ引数に対しては常に同じ結果を返します。

@mixinを使わず、都度すべてを1から書く場合に比べて記載の誤りを減らせます。

変更に強い記載ができる

@mixinの中身を変えると、@mixinを呼び出している箇所全体に変更が反映されます。

このため、変更に強い記載ができます。

参考文献・サイト

• Sass: Sass Basics
• Sass: Interpolation
• Sass: @mixin and @include