Спајање секвенци селектора у @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;
}