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:

#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:

#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:

#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:

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

Mesélje el, mi lesz a fordítás eredménye a következő kódnak:

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