Selektoru secību apvienošana @extend SASS

Ja mums ir nepieciešams apvienot selektoru secības, mēs arī izmantojam direktīvu @extend:

Apskatīsim šādu piemēru:

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

Ievērojiet kompilēto kodu failā css, apvienojot divas secības, kurām nav kopīgu selektoru, automātiski tiek izveidoti jauni selektori: viens ar pirmo secību pirms otrās un viens ar otro secību pirms pirmās:

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

Gadījumā, ja secībām ir kopīgs selektors, tad tās tiks apvienotas kopā, un mijas būs tikai atšķirības (ja tādas pastāv). Nākamajā piemērā abām secībām ir identifikators #main:

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

Kompilācijas rezultātā šie divi identifikatori tiks apvienoti:

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