Sass（scss）の使い方～プレースホルダーと@extendで共通スタイルを再利用しよう

投稿日：2025/06/23 ｜最終更新：2025/06/24
CSS・Sass
scss, プレースホルダー, @mixin, @extend

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

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

プレースホルダー（%記法）とは？

プレースホルダーとは、%から始まる仮のセレクターで、実際のCSSには出力されません。
複数のCSSプロパティをまとめて登録しておくことができます。
登録されたプレースホルダーは、@extendを使うと出力され、複数のセレクタにスタイルを継承させることができます。

scss記述例

// プレースホルダー定義
%btn-base {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
}

// プレースホルダーを継承
.btn-primary {
  @extend %btn-base; // @extend %プレースホルダー名; でスタイルを継承する
  background-color: #3498db;
  color: #fff;
}

.btn-secondary {
  @extend %btn-base; //@extend %プレースホルダー名; でスタイルを継承する
  background-color: #ccc;
  color: #333;
}

%プレースホルダー名と記載すると複数のCSSプロパティをセットにして定義できます。
設定したプレースホルダーを@extendすることでプレースホルダーに登録した内容をセレクタに適用できます。

出力されるCSS

.btn-primary,
.btn-secondary {
// %btn-base に登録されている部分は統合して出力される
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
}

// %btn-base に登録されていない部分は個別に出力される
.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-secondary {
  background-color: #ccc;
  color: #333;
}

.btn-primaryと.btn-secondaryには%btn-baseが@extendされているので、重複しているプレースホルダーの記述部分は統合して出力されます。
プレースホルダーに登録されていない部分のみ個別に出力されます。

プレースホルダーを使うメリット

複数のスタイルをまとめて登録できる
変数の利用では単一の設定内容（文字列・数列など）しか登録できませんが、プレースホルダーでは複数の設定内容をプロパティ名・設定値を組み合わせて登録することができます。
共通するスタイルを一元管理できる
複数のセレクタに同じ設定を適用できるし、修正も一箇所修正すればOKです。
重複する設定が何度も出力されない
プレースホルダーを利用しているセレクタは統合され、異なる部分のみが出力されるので、CSSをシンプルに保つことができます。

プレースホルダー使用時の注意点

プレースホルダーを利用する時は下記のことに注意しましょう。

想定外の統合に注意する
プレースホルダーに登録した内容は@extendされたセレクタが統合されたCSSブロックにまとめて記載されます。
＠extendを乱用するとコンパイル後にかえってわかりにくくなることがあるので注意しましょう。
プレースホルダー登録内容は@extendしないと出力されない
プレースホルダーに登録した内容は@extendしなければ出力されません。
必ず出力したい内容はしっかり@extendしておきましょう。
１回限りのスタイルセットには使用しない
プレースホルダーは複数のセレクタに適用できることがメリットなので、一度しか使わないスタイルにプレースホルダーを使っても意味が薄く、コードが冗長になるためかえって分かりづらくなることがあります。