Обединяване на селекторни последователности в @extend в SASS

Ако трябва да обединим селекторни последователности, ние също използваме директивата @extend:

Нека разгледаме следния пример:

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

Обърнете внимание на компилирания код във файла 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;
}

В резултат на компилацията тези два идентификатора ще бъдат обединени:

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