Uunganishaji wa Mlolongo wa Kiselecta katika @extend kwenye SASS

Ikiwa tunahitaji kuunganisha mlolongo wa kiselecta, basi pia tunatumia derectiva @extend:

Tuchunguze mfano ufuatao:

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

Makini na msimbo uliousanidiwa katika faili css, wakati wa kuunganisha mlolongo miwili, ambayo haina kiselecta cha pamoja, basi automatikali huundwa kiselecta kipya: moja na mlolongo wa kwanza kabla ya wa pili na moja na mlolongo wa pili kabla ya wa kwanza:

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

Katika tukio, wakati mlolongo una kiselecta cha pamoja, basi wataunganishwa pamoja na kubadilishana kutakuwa na tofauti tu (ikiwa zipo). Katika mfano ufuatao mlolongo wote una kitambulisho #main:

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

Kama matokeo ya usanidi huu vitambulisho viwili vitaunganishwa:

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

Eleza, matokeo ya usanidi yatakuwa nini kwa msimbo ufuatao:

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