Sass（scss）の使い方～@mixinを@includeして共通スタイルを再利用しよう

投稿日：2025/06/25
CSS・Sass
scss, プレースホルダー, @mixin

SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。

Sassでは、共通する複数のスタイルをまとめて定義して再利用する方法として、プレースホルダーや@mixinという機能があります。
今回は@mixinの使い方や使い所について紹介します。

@mixinとは？
- scss記述例
- 出力されるCSS
@mixinに引数を渡す方法
- scss記述例
- 出力されるCSS
@mixin の引数にデフォルト値を設定する方法
- scss記述例
- 出力されるCSS
@mixinと条件分岐を併用する
- scss記述例
- 出力されるCSS
@mixinを使うメリット
@mixinを使う時の注意点
@mixinとプレースホルダーを使い分けよう
最後に

@mixinとは？

@mixinは、よく使うスタイルのプロパティと設定値の塊（スニペット）を予め定義しておき、必要な箇所で@includeを使って呼び出す機能です。
何度も同じコードを書く必要がなくなるので、コーディングが非常にスマートになります。

@mixinは、@mixinを記載しただけでは実際のCSSには出力されません。
登録された@mixinは、@includeすることでCSSに出力され、複数のセレクタにスニペットを適用させることができます。

scss記述例

@mixin box-style { // @mixin 定義名{} の中に共通化したいスタイルを記述
    margin: 2rem 0;
    padding: 2rem;
    color: #333;
}

.box {
    @include box-style; //定義を利用
    background: #f7f7f7
}

.box2{
    @include box-style; //定義を利用
    background-color: #eee;
}

@mixin 定義名{}の中に共通化したいスタイルのプロパティと設定値をスニペットとして定義します。
@include 定義名することで設定した@mixinのスタイルスニペットを利用できます。

出力されるCSS

.box {
    margin: 2rem 0;
    padding: 2rem;
    color: #333;
    background: #f7f7f7
}

.box2{
    margin: 2rem 0;
    padding: 2rem;
    color: #333;
    background-color: #eee;
}

@mixinに定義されたスタイルスニペットは@includeする度に出力されます。
プレースホルダーを@extendする時は@extendしたセレクタがまとめて出力されるのに対し、@mixin＋@includeは都度出力となり、出力方法が異なります。

@mixinに引数を渡す方法

@mixinは、関数のように引数を受け取ることができるため、より柔軟かつ動的にスタイルを共通化できます。

scss記述例

@mixin button-style($bg-color, $text-color) {
// @mixin 定義名( $引数名 ){ 定義内容 } と記述して引数（変数）を設定
    background-color: $bg-color; // $bg-colorで背景色を受け取る
    color: $text-color;          // $text-colorで文字色を受け取る
    padding: 10px 20px;
}

.button1 {
    @include button-style(black, white) // 引数に文字色・背景色を与える
}

出力されるCSS

.button1 {
  background-color: white; // $bg-colorが代入される
  color: black;            // $text-colorが代入される
  padding: 10px 20px;
}

@mixinの引数にデフォルト値を設定する方法

@mixinの引数にはデフォルト値を設定することができます。
呼び出し時に引数を省略した場合は、このデフォルト値が使われます。

scss記述例

@mixin my-box($color: black, $bg-color: white, $font-size: 16px) {
// @mixin 定義名( $引数名: デフォルト値 ){ 定義内容 } と記述して引数（変数）にデフォルト値を設定
    color: $color;         // $colorで文字色を受け取る
    background: $bg-color;         // $bg-colorで文字色を受け取る
    font-size: $font-size; // $font-sizeで文字サイズを受け取る
}
  
// @mixinの使用
.block1 {
    @include my-box; // 引数が入っていない場合はデフォルトの値が適用される
}
  
.block2 {
    @include my-box( #666, #ccc, 20px); // 引数を指定してカスタマイズする
}
.block3 {
    @include my-box( #333, , 12px ); // 複数引数がある場合、順番に利用される。
}
.block4 {
    @include my-box( $font-size: 24px ); // 変数名を指定すると明示的に引数を与えられる
}

デフォルト値は、@mixinの引数の変数名に:デフォルト値と続けて記述することで設定できます。
引数が入っていない場合はデフォルト値が適用されます。

出力されるCSS

.block1 {
    color: black;      // $colorのデフォルト値が代入される
    background: white; // $bg-colorのデフォルト値が代入される
    font-size: 16px;   // $font-sizeのデフォルト値が代入される
}
  
.block2 {
    color: #666;      // $colorが代入される
    background: #ccc; // $bg-colorが代入される
    font-size: 20px;  // $font-sizeが代入される
}
.block3 {
    color: #666;       // $colorが代入される
    background: white; // $bg-colorのデフォルト値が代入される
    font-size: 20px;   // $font-sizeが代入される
}
.block4 {
    color: black;      // $colorのデフォルト値が代入される
    background: white; // $bg-colorのデフォルト値が代入される
    font-size: 24px;   // $font-sizeが代入される
}

@mixinと条件分岐を併用する

@mixinでは、スニペット内で条件分岐を利用できます。

scss記述例

@mixin box-size($size: medium) {
  @if $size == small {
    width: 300px;
  } @else if $size == medium {
    width: 600px;
  } @else if $size == large {
    width: 900px;
  }
}
.btn1{
  @include box-size(small); // 引数にsmallを指定
}
.btn2{
  @include box-size;        // 引数のデフォルト値を利用
}
.btn3{
  @include box-size(large); // 引数にlargeを指定
}

出力されるCSS

.btn1 {
  width: 300px;
}

.btn2 {
  width: 600px;
}

.btn3 {
  width: 900px;
}

@mixinを使うメリット

複数のスタイルをまとめて登録できる
変数の利用では単一の設定内容（文字列・数列など）しか登録できませんが、@mixinでは複数の設定内容をプロパティ名・設定値を組み合わせて登録することができます。
共通するスタイルを一元管理できる
複数のセレクタに同じ設定を適用できるし、修正も一箇所修正すればOKです。
柔軟にカスタマイズできる
引数を使って、色・サイズ・余白などを動的に指定できるため、一度定義したスニペットにバリエーションを展開することができます。
条件分岐やネストなども活用できる
@ifや@contentなどの構文と組み合わせて、よりロジカルで動的なスタイル設計が可能になります。

@mixin使用時の注意点

@mixinは便利な反面、使い方を間違えるとパフォーマンスや保守性に悪影響を与えることもあるので、下記のことに注意しましょう。

使いすぎるとCSSが肥大化する

@mixinは@includeで呼び出す度にスニペットが展開されるため、同じ内容を複数の場所で@includeすると、コンパイルしたCSSに同じコードが何度も含まれてしまいます。場合に応じてプレースホルダー（%placeholder）の使用を検討しましょう。
冗長な引数設計に注意する
引数が多すぎる、またはネストしすぎた@mixinはかえって読みにくく、メンテナンスが難しくなります。
@mixinの引数は必要最低限に留め、@mixin定義時に設計をよく整理しておきましょう。
１回限りのスタイルセットには使用しない
@mixinは複数のセレクタに適用できることがメリットなので、一度しか使わないスタイルに@mixinを使っても意味が薄く、コードが冗長になるためかえって分かりづらくなることがあります。