Extendとプレースホルダーセレクター
@extendとサイレントプレースホルダーセレクターを使って、セレクター間でスタイルを共有します。
「Extendとプレースホルダーセレクター」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
Sass の @extend
@extend を使用すると、あるセレクターが別のセレクターのすべてのスタイルを継承できます。コードを重複させる代わりに、コンパイル後の CSS に共有ルールセットが作成されます。
<div class="error">Error message</div>
<div class="critical-error">Critical error message</div>
プレースホルダーセレクター
プレースホルダーセレクター（% が接頭辞）は、単独ではコンパイルされず、拡張された場合にのみ使用されるスタイルブロックを定義します。何かに拡張されない限り、CSS は生成されません。
<div class="product-card">Product card</div>
<div class="profile-card">Profile card</div>
クラスよりプレースホルダーを使う理由
実際のクラスを拡張すると、そのクラスが置かれているセレクターコンテキスト全体がコンパイル後の出力に追加されます。プレースホルダーの方がすっきりしており、拡張元のセレクターだけをグループ化して出力します。
@extend のコンパイル結果
複数のセレクターが同じプレースホルダーを拡張すると、Sass はそれらをカンマ区切りのルールにまとめます：
<div class="product-card">Product card</div>
<div class="profile-card">Profile card</div>
@extend の注意点
@extend には重要な注意点があります：
- メディアクエリ内では使用できません
- 拡張の連鎖が発生すると、予期しない大きなグループ化セレクターが生成されることがあります
- コンパイル後の CSS を元のソースファイルまで追跡しにくくなります
@extend とミックスインのトレードオフ
比較：
@extend：CSS が小さくなります（ルールを共有）が、複雑なセレクターの連鎖やメディアクエリの制限があります@mixin：宣言が重複しますが、より予測しやすく、メディアクエリ内でも使用できます
通常はミックスインの方が適しています
現在の Sass では、一般的に @extend よりもミックスインが推奨されます。HTTP/2 と gzip 圧縮により宣言の重複がそれほど問題にならない一方、ミックスインのデバッグしやすさは CSS サイズのわずかな違いを上回ります。
@extend が適している場合
@extend（プレースホルダーとの組み合わせ）が適しているのは、次のような場合です：
- 複数のセレクターが同じ意味上の状態（エラー状態など）を本当に共有している
- メディアクエリの内部ではない
- 基になるスタイルが安定していて、明確に定義されている
プレースホルダーとテーマ設定
プレースホルダーは、複数のコンポーネントが継承するリセットに近いユーティリティセットに適しています：
<a href="#" class="skip-link">Skip to content</a>
<span class="sr-label">Screen reader label</span>
非推奨化に関する考慮事項
複雑さや、発生する可能性のあるセレクターの肥大化を理由に、@extend を完全に禁止しているスタイルガイドやチームもあります。トレードオフを理解し、チームの規約に従ってください。
確認問題
通常のクラスを拡張する場合と、プレースホルダーセレクター（%）を拡張する場合の違いは何ですか？
まとめ
@extend を使用すると、セレクターが別のセレクターのスタイルを継承し、コンパイル後の CSS でセレクターがグループ化されます。プレースホルダー（%name）は拡張されるまで何もコンパイルされないため、実際のクラスを拡張するよりもすっきりします。メディアクエリ内での @extend は避けてください。現在の Sass では、予測しやすくデバッグしやすいミックスインが、一般的に @extend よりも推奨されます。
よくある質問
「Extendとプレースホルダーセレクター」レッスンは無料ですか？
はい。「Extendとプレースホルダーセレクター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Extendとプレースホルダーセレクター」で何を学びますか？
@extendとサイレントプレースホルダーセレクターを使って、セレクター間でスタイルを共有します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Extendとプレースホルダーセレクター」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 変数、ネスト、パーシャル
- ミックスインとインクルード
- Extendとプレースホルダーセレクター
- Sassの関数と制御フロー