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

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

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

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

Παρατηρήστε τον compiled κώδικα στο αρχείο css, κατά την ένωση δύο ακολουθιών, που δεν έχουν κοινούς επιλογείς, τότε σχηματίζονται αυτόματα νέοι επιλογείς: ένας με την πρώτη ακολουθία πριν από το δεύτερο και ένας με τη δεύτερη ακολουθία πριν από το πρώτο:

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

Στην περίπτωση που οι ακολουθίες έχουν έναν κοινό επιλογέα, τότε θα ενωθούν μαζί και εναλλάσσονται μόνο οι διαφορές (εάν υπάρχουν). Στο επόμενο παράδειγμα και οι δύο ακολουθίες έχουν τον αναγνωριστικό #main:

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

Ως αποτέλεσμα της μεταγλώττισης, αυτοί οι δύο αναγνωριστές θα ενωθούν:

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

Πείτε μας ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

div p {
	font-size: 12px;
	padding-bottom: 4px;
}
link button #card-title {
	@extend p;
}