Sassのmixin入門

はじめに

SassはCSSの拡張言語として、Web制作の現場で広く利用されています。その中でも、mixinはコードの再利用性を高め、保守性を向上させるための強力な機能です。
この記事では、Sassのmixinについて、基本的な使い方から実践的な活用方法、ちょっとしたTipsまで分かりやすくまとめます。

mixinとは

mixin（ミックスイン）とは、Sassのコードをひとまとまりにして、何度も再利用できるようにする仕組みです。
CSSの「コピペ」をなくし、似たようなスタイルを効率よく管理することができます。

style.scss

@mixin ボーダー {
  border: 1px solid #ccc;
  border-radius: 4px;
}

.box {
  @include ボーダー;
  padding: 16px;
}

mixinとして部品化すべき箇所

mixin化すべき部分は主に次のようなパターンです。

• よく使う装飾やレイアウト（ボタン、カード、見出し など）
• ベンダープレフィックスが必要なプロパティ
• 値だけが異なる、繰り返し使うスタイル
• メディアクエリやレスポンシブ対応の記述

基本的な使い方

1. 基本的なmixinの作成と利用

style.scss

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100vw;
  height: 100vh;
  @include center;
}

2. 引数付きmixin

style.scss

@mixin fontsize($size, $weight: normal) {
  font-size: $size;
  font-weight: $weight;
}

.title {
  @include fontsize(2rem, bold);
}

.text {
  @include fontsize(1rem);
}

実践的な使い方

1. レスポンシブデザイン用mixin（ブレイクポイント管理）

style.scss

// 代表的なブレイクポイントを変数化
$breakpoints: (
  "sm": 480px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px
);

// 使い方：@include mq('md') { ... }
@mixin mq($size) {
  @media (max-width: map-get($breakpoints, $size)) {
    @content;
  }
}

// 使用例
.card {
  width: 600px;
  @include mq('sm') {
    width: 100%;
  }
}

2. 繰り返しや計算を使ったmixin（グリッド作成など）

style.scss

// 12カラムグリッド
@mixin col($n, $total: 12) {
  width: (100% / $total) * $n;
}

// 使用例
.col-3 {
  @include col(3);
}
.col-6 {
  @include col(6);
}

3. アイコン（SVGやWebフォント）をmixinで管理

style.scss

@mixin icon($code, $size: 1em, $color: inherit) {
  font-family: "FontAwesome";
  content: $code;
  font-size: $size;
  color: $color;
  speak: none;
  font-style: normal;
}

// 使用例（疑似要素に）
.icon-star::before {
  @include icon("\f005", 1.2em, gold);
}

Tips

• デフォルト値を活用
  ⇒mixinの引数にはデフォルト値を設定できるので、柔軟にカスタマイズできます。

• @contentで任意のスタイル挿入
  ⇒@contentを使えば、mixinの呼び出し元で好きなスタイルを追加できます。

• mixinの多用に注意
  ⇒むやみにmixinを増やすと逆に管理が複雑になるため、「よく使うもの」に絞って部品化しましょう。

最後に

mixinはSassの中でも特に便利な機能です。
使いこなすことで、CSSの記述がグッと効率的になり、チーム開発でも一貫性を保ちやすくなります。
ぜひ、自分のプロジェクトにあったmixinを作ってみてください！