Spájanie sekvencií selektorov v @extend v SASS

Ak potrebujeme spojiť sekvencie selektorov, použijeme tiež direktívu @extend:

Pozrime sa na nasledujúci príklad:

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

Všimnite si skompilovaný kód v súbore css, pri spojení dvoch sekvencií, ktoré nemajú spoločné selektory, sa automaticky vytvoria nové selektory: jeden s prvou sekvenciou pred druhým a jeden s druhou sekvenciou pred prvým:

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

V prípade, keď majú sekvencie spoločný selektor, budú spojené dohromady a striedať sa budú len rozdiely (pokiaľ nejaké existujú). V nasledujúcom príklade majú obe sekvencie identifikátor #main:

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

V dôsledku kompilácie budú tieto dva identifikátory spojené:

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

Popíšte, aký bude výsledok kompilácie nasledujúceho kódu:

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