Verkettung von Selektorsequenzen in @extend in SASS

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

Betrachten wir das folgende Beispiel:

#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:

#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:

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

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

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

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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