Аб'яднанне паслядоўнасцей селектараў у @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;
}