SASS da @extend yordamida selektorlar ketma-ketligini birlashtirish

Agar biz selektorlar ketma-ketligini birlashtirishimiz kerak bo'lsa, biz @extend direktivasidan foydalanamiz:

Quyidagi misolni ko'rib chiqamiz:

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

css faylida kompilyatsiya qilingan kodga e'tibor bering, umumiy selektorlari bo'lmagan ikkita ketma-ketlikni birlashtirganda, avtomatik ravishda yangi selektorlar hosil bo'ladi: biri birinchi ketma-ketlik ikkinchisidan oldin va biri ikkinchi ketma-ketlik birinchisidan oldin:

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

Ketma-ketliklarning umumiy selektori bo'lganda, ular birlashtiriladi va faqat farqlar (agar mavjud bo'lsa) almashinadi. Quyidagi misolda ikkala ketma-ketlik ham #main identifikatoriga ega:

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

Kompilyatsiya natijasida bu ikkita identifikator birlashtiriladi:

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

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushuntiring:

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