• CSS

【SCSS入門】@extendでスタイルを継承させる方法

投稿日:2025年09月02日

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

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

【はじめに】SCSSとは？

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

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

本記事ではSCSSで複数のセレクターで同じスタイルを共有させる「@extend」の記法をご紹介します。

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

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

@extendとは？

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

SCSSの@extendは、そのような課題を解決すべく、あるセレクターのスタイルを別のセレクターに継承させることができます。これにより、共通のスタイルを一度だけ書けばよくなり、コードの重複を防げます。

CSSファイルサイズを削減

@extendはスタイルをコピーするのではなく、セレクターをグループ化するため、コンパイル後のCSSコードがスッキリし、ファイルサイズが小さくなります。

これは、特に大規模なサイトや、パフォーマンスを重視する場合に大きなメリットとなります。

保守性の向上

共通のスタイルを変更したい場合、継承元のセレクターを1箇所修正するだけで、すべての継承先に変更が適用されます。

セマンティックなマークアップ

@extendを使えば、class="btn btn-primary"のように複数のクラス名をHTMLに書く必要がなくなります。これにより、HTMLのコードがよりシンプルで読みやすくなります。

セマンティックとは、HTMLタグが持つ意味を正しく理解し、適切に使うことです。例えば、見出しには<h1>、段落には<p>を使い、ロボットやスクリーンリーダーにも内容を正確に伝えることで、アクセシビリティやSEOを向上させます。

基本的な使い方

@extendは、まず元となるセレクターで継承させたいスタイルを定義します。その後、他のセレクター内で「@extend 継承元のセレクター名」を記述することでスタイルを引き継ぐことができます。

下記の例では「.message」セレクターに定義したパディングやボーダーのスタイルを「.success」「.error」セレクターに継承しています。

.message {//共通スタイル
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.success {
  @extend .message;//スタイルを継承
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}
.error {
  @extend .message;//スタイルを継承
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

コンパイル後のCSSは以下のようになります。

.message, .success, .error {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/*以下省略*/

このように@extendを使うとコンパイル後のコードをすっきりとまとめることができます。

プレースホルダーセレクター【%】

プレースホルダーセレクターとは「%（パーセント）」記号で始まる特別なセレクターです。

単独ではコンパイルされず、@extendで呼び出されたときにのみCSSを生成するので、HTMLに存在しないセレクターを作らずに済みます。

また、開発者に対して「このスタイルは継承専用である」という意図を明確に伝えられるというメリットもあります。

%btn-base {//共通スタイルをプレースホルダーセレクターで定義
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.btn-primary {
  @extend %btn-base;//プレースホルダーを継承
  background-color: #007bff;
  color: white;
}
.btn-secondary {
  @extend %btn-base;//プレースホルダーを継承
  background-color: #6c757d;
  color: white;
}

コンパイル後のCSSは以下のようになります。

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
/*以下省略*/

プレースホルダーセレクターを使わなければ、「.btn」というのような余計なセレクターを作る必要が発生します。継承用のスタイルであることを明示するためにもプレースホルダーセレクターを使った方がスマートです。

@extendを使う上での注意点

@extendを使う場合は以下の点に留意しておきましょう。

多用しすぎない

@extendを多用しすぎると、意図しないセレクターが生成され、CSSが複雑になる可能性があります。

同じメディアクエリ内で使用する

@extendは、同じメディアクエリ内にあるセレクターにしか適用できません。

@mixinと@extendの違い

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

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

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

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

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

まとめ

以上がSCSSにおける@extendの使い方です。

プレースホルダーセレクター (%) と組み合わせて使い、無駄なCSS生成を防ぐことが@extendを活用するポイントです。