Sassの@mixinとプレースホルダー、どっちを使う？使い分けのコツを紹介
SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。
Sassとは？SCSSとSASSの違いや基礎知識と導入方法【2025年版】Sassでは、共通する複数のスタイルをまとめて定義して再利用する方法として、プレースホルダーや@mixinという機能があります。
どちらもスタイルスニペットを使い回すという機能の趣旨は同じですが、出力の方法が異なるので、使い分けが重要となります。
今回は@mixinとプレースホルダーの使い分けについてまとめていきたいと思います。
もくじ
@mixinとは？
@mixinは、よく使うスタイルのプロパティと設定値の塊（スニペット）を予め定義しておき、必要な箇所で@includeを使って呼び出す機能です。
何度も同じコードを書く必要がなくなるので、コーディングが非常にスマートになります。
@mixinは、@mixinを記載しただけでは実際のCSSには出力されません。
登録された@mixinは、@includeすることでCSSに出力され、複数のセレクタにスニペットを適用させることができます。
詳しくは下記の記事で紹介しています。
Sass（scss）の使い方～@mixinを@includeして共通スタイルを再利用しようプレースホルダー（%記法）とは？
プレースホルダーは、よく使うスタイルのプロパティと設定値の塊（スニペット）を予め定義しておき、必要な箇所で@extendを使って呼び出す機能です。
何度も同じコードを書く必要がなくなるので、コーディングが非常にスマートになります。
プレースホルダーは、%から始まる仮のセレクターで、実際のCSSには出力されません。
登録されたプレースホルダーは、@extendを使うと出力され、複数のセレクタにスタイルを継承させることができます。
詳しくは下記の記事で紹介しています。
Sass（scss）の使い方～プレースホルダーと@extendで共通スタイルを再利用しよう@mixinとプレースホルダーの違い
@mixinとプレースホルダーはどちらも共通スタイルを再利用する機能です。
それぞれの特徴を理解して、適切に使い分けることが大切です。
| 比較項目 | @mixin | プレースホルダー |
|---|---|---|
| 呼び出し方 | @include |
@extend |
| 引数 | あり（柔軟に値を渡せる） | なし |
| CSS出力 | 呼び出すたびにスタイルが出力される | 出力は1回だけ（セレクタがまとめられる） |
| 複雑な ロジック |
可能（条件分岐・ループなどを利用できる） | 不可（スタイル定義のみ） |
| 読みやすさ | 複雑なものにも対応しやすい | シンプルな共通スタイルに向いている |
@mixinとプレースホルダーの使い分け
@mixinとプレースホルダーを使い分ける時には、下記のポイントに気をつけるといいと思います。
スニペットの汎用性で考える
スニペット（スタイルブロック）の内容を動的に変えたいなら@mixinを採用しましょう。
プレースホルダーはスニペットに一度定義した内容を呼び出し時に変更することはできないので、スニペットの内容をセレクタに応じて変更する必要がない場合はプレースホルダーを使用しましょう。
コンパイルのされ方で考える
@mixinではコンパイル時に@includeされる度にスニペットが出力されます。
プレースホルダーではコンパイル時に@extendされたセレクタに統合されてスニペットが一度のみ出力されます。
コンパイルされたあとにスニペットが重複してもいいなら@mixinを利用しましょう。
コンパイルされたあとのソースをコンパクトにしたいならプレースホルダーを使用しましょう。
最後に
@mixinもプレースホルダーもSassの中でも非常に便利な機能です。
一方で使いすぎはかえって可読性を下げてしまうので、適切な箇所で適切な機能を利用して活用することが重要です。
