Spájanie sekvencií selektorov v @extend v SASS

Ak potrebujeme spojiť sekvencie selektorov, použijeme tiež direktívu @extend:

Pozrime sa na nasledujúci príklad:

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

Všimnite si skompilovaný kód v súbore css, pri spojení dvoch sekvencií, ktoré nemajú spoločné selektory, sa automaticky vytvoria nové selektory: jeden s prvou sekvenciou pred druhým a jeden s druhou sekvenciou pred prvým:

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

V prípade, keď majú sekvencie spoločný selektor, budú spojené dohromady a striedať sa budú len rozdiely (pokiaľ nejaké existujú). V nasledujúcom príklade majú obe sekvencie identifikátor #main:

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

V dôsledku kompilácie budú tieto dva identifikátory spojené:

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