Het samenvoegen van selectorsequenties in @extend in SASS

Als we selectorsequenties moeten samenvoegen, gebruiken we ook de directive @extend:

Laten we het volgende voorbeeld bekijken:

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

Let op de gecompileerde code in het css-bestand: wanneer twee sequenties, die geen gemeenschappelijke selectors hebben, worden samengevoegd, worden er automatisch nieuwe selectors gemaakt: één met de eerste sequentie vóór de tweede en één met de tweede sequentie vóór de eerste:

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

In het geval dat de sequenties een gemeenschappelijke selector hebben, dan worden ze samengevoegd en worden alleen de verschillen afgewisseld (als deze bestaan). In het volgende voorbeeld hebben beide sequenties de identifier #main:

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

Als resultaat van de compilatie worden deze twee identifiers samengevoegd:

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

Vertel wat het resultaat van de compilatie van de volgende code zal zijn:

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