Verkettung von Selektorsequenzen in @extend in SASS

Wenn wir Selektorsequenzen verketten müssen, verwenden wir ebenfalls die Direktive @extend:

Betrachten wir das folgende Beispiel:

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

Achten Sie auf den kompilierten Code in der css-Datei. Beim Verketten von zwei Sequenzen, die keine gemeinsamen Selektoren haben, werden automatisch neue Selektoren gebildet: einer mit der ersten Sequenz vor der zweiten und einer mit der zweiten Sequenz vor der ersten:

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

Falls die Sequenzen einen gemeinsamen Selektor haben, werden sie zusammengeführt und es wechseln sich nur die Unterschiede (sofern vorhanden) ab. Im folgenden Beispiel haben beide Sequenzen den Identifikator #main:

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

Als Ergebnis der Kompilierung werden diese beiden Identifikatoren zusammengeführt:

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;
}