SASSにおける@extendを使用したセレクターシーケンスの統合

セレクターシーケンスを統合する必要がある場合、私たちは同じく@extendディレクティブを使用します:

次の例を考察しましょう:

#main .list p {
	font-weight: bold;
}
#sub .resume .link {
	@extend p;
}

共通のセレクターを持たない2つのシーケンスを統合する場合、自動的に新しいセレクターが形成されることに注意してください: 1つは最初のシーケンスが2番目の前にあり、もう1つは2番目のシーケンスが最初の前にあります。 cssファイル内のコンパイルされたコードを確認してください:

#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
	font-weight: bold;
}

シーケンスが共通のセレクターを持つ場合、それらは一緒に統合され、違い（もし存在すれば）のみが交互に現れます。次の例では、両方のシーケンスが識別子#mainを持っています:

#main .list p {
	font-weight: semi-bold;
}
#main .resume .link {
	@extend p;
}

コンパイルの結果、これらの2つの識別子は統合されます:

#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
	font-weight: bold;
}

次のコードのコンパイル結果がどのようになるか説明してください:

div p {
	font-size: 12px;
	padding-bottom: 4px;
}
link button #card-title {
	@extend p;
}