Combinación de secuencias de selectores en @extend en SASS

Si necesitamos combinar secuencias de selectores, también usamos la directiva @extend:

Consideremos el siguiente ejemplo:

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

Preste atención al código compilado en el archivo css, al combinar dos secuencias que no tienen selectores comunes, se forman automáticamente nuevos selectores: uno con la primera secuencia antes de la segunda y uno con la segunda secuencia antes de la primera:

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

En el caso de que las secuencias tengan un selector común, se combinarán y solo se alternarán las diferencias (si las hay). En el siguiente ejemplo, ambas secuencias tienen el identificador #main:

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

Como resultado de la compilación, estos dos identificadores se combinarán:

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