Selektorių sekų sujungimas naudojant @extend SASS'e

Jei mums reikia sujungti selektorių sekas, taip pat naudojame direktyvą @extend:

Panagrinėkime tokį pavyzdį:

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

Atkreipkite dėmesį į surinktą kodą css faile, kai sujungiamos dvi sekos, kurios neturi bendrų selektorių, automatiškai suformuojami nauji selektoriai: vienas su pirmąja seka prieš antrąją ir vienas su antrąja seka prieš pirmąją:

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

Kai sekos turi bendrą selektorių, jos bus sujungtos kartu ir kaitaliosis tik skirtumai (jei tokie yra). Kitame pavyzdyje abiejų sekų identifikatorius #main:

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

Surinkimo rezultate šie du identifikatoriai bus sujungti:

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

Paaiškinkite, koks bus šio kodo surinkimo rezultatas:

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