Аб'яднанне паслядоўнасцей селектараў у @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;
}