Спајање секвенци селектора у @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;
}