よく使う便利なSCSSの@mixinまとめ

はじめに

SCSSを使っていると、同じようなスタイルを何度も書く場面がすぐに出てきます。ブレークポイント、ボタン、テキスト省略などは、特に重複しやすいポイントです。

そこで便利なのが mixin です。うまく使うと保守しやすくなりますが、増やしすぎると逆に読みにくくなります。この記事では、実務で登場頻度が高いmixinをまとめて紹介します。

1. メディアクエリmixin

SCSS

SCSS
$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px
);

@mixin mq($key) {
  @media (min-width: map-get($breakpoints, $key)) {
    @content;
  }
}

.card-list {
  display: grid;
  grid-template-columns: 1fr;

  @include mq(md) {
    grid-template-columns: repeat(2, 1fr);
  }
}

CSS出力

CSS
.card-list {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

ブレークポイントを1か所で管理できるので、設計変更時の修正漏れを減らせます。@content で中身を渡せるため、汎用性も高いです。

2. フレックス中央寄せmixin

SCSS

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

.empty-state {
  @include flex-center;
  min-height: 180px;
}

CSS出力

CSS
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

中央寄せの3点セットは登場回数が多いので、mixin化の効果が出やすいです。クラス名だけで意図を読めるようになります。

3. 1行省略mixin

SCSS

SCSS
@mixin truncate-1line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.table__name {
  @include truncate-1line;
  max-width: 240px;
}

CSS出力

CSS
.table__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 240px;
}

管理画面や一覧テーブルで使う機会が多い定番です。毎回書くより、mixin化しておくとミスを減らせます。

4. 複数行省略mixin

SCSS

SCSS
@mixin line-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

.card__title {
  @include line-clamp(2);
}

CSS出力

CSS
.card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

カード一覧の見た目を揃えるときに便利です。行数を引数で変えられるので、再利用しやすいmixinです。

5. ボタン共通mixin

SCSS

SCSS
@mixin button-base($bg, $color: #fff) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: $bg;
  color: $color;
  font-weight: 600;
  text-decoration: none;
}

.btn--primary { @include button-base(#0f172a); }
.btn--danger  { @include button-base(#dc2626); }

CSS出力

CSS
.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.btn--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

引数で色を渡せるため、バリアント違いのボタンを簡潔に量産できます。デザイン変更も1か所起点で反映しやすいです。

6. アブソリュート中央配置mixin

SCSS

SCSS
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal__spinner {
  @include absolute-center;
}

CSS出力

CSS
.modal__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ローディングやアイコン配置でよく使う定番です。毎回の座標計算を省略できるため、実装スピードが上がります。

注意点

mixinは便利ですが、何でも共通化すると逆に読みづらくなります。用途が違うスタイルを1つにまとめすぎると、引数が増えて保守しづらくなります。

まずは登場回数が多いパターンだけを切り出し、使われないmixinは定期的に整理する運用がおすすめです。

まとめ

SCSSのmixinは、よく使う型を少数精鋭で持つと実務で強いです。今回の6パターンを揃えるだけでも、重複コードをかなり減らせます。

導入時は「共通化しすぎない」ことを意識し、使う場面が明確なmixinから増やしていくのが失敗しにくい進め方です。

read next