Szelektor szekvenciák egyesítése @extend használatával SASS-ban

Ha szelektor szekvenciákat kell egyesítenünk, akkor szintén az @extend direktívát használjuk:

Vizsgáljuk meg a következő példát:

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

Figyeljük meg a lefordított kódot a css fájlban, amikor két olyan szekvenciát egyesítünk, amelyeknek nincsenek közös szelektorai, akkor automatikusan új szelektorok jönnek létre: egy az első szekvenciával a második előtt és egy a második szekvenciával az első előtt:

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

Abban az esetben, amikor a szekvenciáknak van közös szelektoruk, akkor össze lesznek vonva, és csak a különbségek fognak váltakozni (ha vannak ilyenek). A következő példában mindkét szekvenciának van #main azonosítója:

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

A fordítás eredményeképpen ez a két azonosító össze lesz vonva:

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