Обединяване на селекторни последователности в @extend в SASS

Ако трябва да обединим селекторни последователности, ние също използваме директивата @extend:

Нека разгледаме следния пример:

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

Обърнете внимание на компилирания код във файла css, при обединяване на две последователности, които нямат общи селектори, автоматично се образуват нови селектори: един с първата последователност преди втория и един с втората последователност преди първия:

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

В случай, че последователностите имат общ селектор, те ще бъдат обединени заедно и ще се редуват само разликите (ако има такива). В следващия пример и двете последователности имат идентификатор #main:

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

В резултат на компилацията тези два идентификатора ще бъдат обединени:

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