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

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

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

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

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

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

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

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

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

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

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