Ενσωμάτωση ακολουθιών επιλογών στο @extend στο SASS

Αν χρειαστεί να ενσωματώσουμε ακολουθίες επιλογών, χρησιμοποιούμε επίσης την οδηγία @extend:

Ας εξετάσουμε το ακόλουθο παράδειγμα:

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

Παρατηρήστε τον compiled κώδικα στο αρχείο 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;
}