• CSS

【SCSS入門】@mixinでスタイルのまとまりを再利用する

投稿日:2025年09月02日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つまずいたポイントなどを備忘録としてまとめました。これからSCSSを始める方や、基本的な使い方を再確認したい方の参考になれば幸いです。

【はじめに】SCSSとは？

SCSS（Sassy CSS）は、CSSをより効率的に、そして保守しやすくするための言語です。CSSにはない便利な機能が多数追加されており、以下のような特徴があります。

• 変数を定義できる。
• セレクターを入れ子にして書ける。
• スタイルのまとまりを再利用できる。
• 複数のセレクターで同じスタイルを継承できる。

本記事ではSCSSでスタイルのまとまりを再利用できる@mixin（ミックスイン）の記法をご紹介します。

なお、SCSSで書いたコードは最終的にブラウザが理解できるCSSにコンパイル（変換）しなければ使用できません。

別の記事にて、VSCodeの拡張機能を使ってSCSSをコンパイルする方法をご紹介していますの、よろしければそちらもご覧ください。

@mixin（ミックスイン）とは？

CSSでは、ボタンやカードデザインなど、同じスタイルを複数の場所で使い回したい場合でも、そのスタイルを何度も繰り返し記述しなくてはなりませんでした。

SCSSの@mixinは、そのような課題を解決すべく、共通のスタイルをひとまとめにして必要な場所で呼び出すことができる機能です。

コードの重複をなくし、記述量を削減

同じスタイルを何度も書く手間がなくなります。CSSにコンパイルされた後も、コード量が最適化されます。

メンテナンス性の向上

スタイルの変更が必要になった場合、@mixinの定義部分を1箇所修正するだけで、すべての呼び出し箇所に反映されます。チーム開発において、デザインの一貫性を保つ上で非常に有効です。

コードの可読性向上

@mixinに意味のある名前をつけることで、そのスタイルが何を表しているのかが一目で分かります。コード全体が整理され、読みやすくなります。

基本的な使い方

@mixinは、下図のように任意の名前を付けることでスタイルのまとまりを定義し、

その後でセレクターに対して@includeを使ってスタイルを読み込みます。

下記の例では、ボタンをデザインするにあたり、共通スタイルとしてパディングやフォントサイズを@mixinで定義し、使いまわせるようにしています。

各ボタンにおいては、共通スタイルは@inculdeの一行のみ記述すればよく、個別に背景色や文字色を設定するだけで済みます。

@mixin button-base {//スタイルを定義
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
}
.button-primary {
  @include button-base;//呼び出し
  background-color: #007bff;
  color: white;
}
.button-secondary {
  @include button-base;//呼び出し
  background-color: #6c757d;
  color: white;
}

【応用】引数を使う方法

引数とは、mixinに柔軟性を持たせるための機能です。色やサイズなど、スタイルの一部を呼び出す側で指定できます。

スタイルの一部を動的に変更したいときに使うことで、より柔軟なスタイルの再利用が可能になります。

スタイル名の後ろに括弧を書いて引数を定義します。引数の頭には「$」（ドルマーク）を付けます。

@includeで呼び出す際に、引数に任意の値を代入することでセレクターごとに異なる値を設定できます。

なお、引数は複数設定することが可能です。

下記の例では、引数を使って背景色と文字色を呼び出す側で動的に設定できるようにしています。

@mixin custom-button($bg-color, $text-color: white) {//引数を定義
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  background-color: $bg-color;
  color: $text-color;
}
.button-info {
  @include custom-button(#17a2b8);//引数に値を渡して呼び出し
}
.button-dark {
  @include custom-button(#343a40, #f8f9fa);//複数の引数に値を渡して呼び出し
}

引数の初期値について

先ほどの例では、@mixinのcustom-buttonに$bg-colorと$text-colorという2つの引数を定義していました。

このとき$text-colorには「white」というデフォルト値を設定しています。

これによりセレクター「.button-info」の方では「$text-color」の引数を省略することが可能になっています。

@mixinと@extendの違い

SCSSには、@extendという、@mixinと似た機能があります。それぞれの違いを理解して使い分けることが重要です。

@mixin は、共通のスタイルを関数のように定義し、呼び出すたびにそのスタイルをコピーします。そのため、コンパイル後のCSSは冗長になる傾向がありますが、引数を使って柔軟なスタイルを生成できます。

一方@extend は、特定のセレクターのスタイルを継承させます。これにより、コンパイル後のCSSは共通のスタイルを.parent, .child { ... }のようにグループ化するため、ファイルサイズを小さく保てます。しかし、引数を持たないため、柔軟性に欠けます。

柔軟性が必要で、スタイルの一部を動的に変えたい場合は@mixin、コードの重複をなくすことが最優先で、ファイルサイズを小さくしたい場合は@extendを検討しましょう。

@extendについては、こちらのページに詳しくまとめていますので、よろしければご覧ください。

まとめ

以上がSCSSにおける@mixinの使い方です。@mixinは、CSSのスタイルを再利用するための強力な機能です。

さらに引数を使えば、より柔軟なスタイルを簡単に実現できるうえ、メンテナンスのしやすさもアップします。