Selektorių sekų sujungimas naudojant @extend SASS'e

Jei mums reikia sujungti selektorių sekas, taip pat naudojame direktyvą @extend:

Panagrinėkime tokį pavyzdį:

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

Atkreipkite dėmesį į surinktą kodą css faile, kai sujungiamos dvi sekos, kurios neturi bendrų selektorių, automatiškai suformuojami nauji selektoriai: vienas su pirmąja seka prieš antrąją ir vienas su antrąja seka prieš pirmąją:

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

Kai sekos turi bendrą selektorių, jos bus sujungtos kartu ir kaitaliosis tik skirtumai (jei tokie yra). Kitame pavyzdyje abiejų sekų identifikatorius #main:

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

Surinkimo rezultate šie du identifikatoriai bus sujungti:

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