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:

style.scss#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:

style.css#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:

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

Kompilyatsiya natijasida bu ikkita identifikator birlashtiriladi:

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

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