Uunganishaji wa Mlolongo wa Kiselecta katika @extend kwenye SASS

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

Tuchunguze mfano ufuatao:

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

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

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

Kama matokeo ya usanidi huu vitambulisho viwili vitaunganishwa:

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;
}