Selektoru secību apvienošana @extend SASS

Ja mums ir nepieciešams apvienot selektoru secības, mēs arī izmantojam direktīvu @extend:

Apskatīsim šādu piemēru:

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

Ievērojiet kompilēto kodu failā css, apvienojot divas secības, kurām nav kopīgu selektoru, automātiski tiek izveidoti jauni selektori: viens ar pirmo secību pirms otrās un viens ar otro secību pirms pirmās:

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

Gadījumā, ja secībām ir kopīgs selektors, tad tās tiks apvienotas kopā, un mijas būs tikai atšķirības (ja tādas pastāv). Nākamajā piemērā abām secībām ir identifikators #main:

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

Kompilācijas rezultātā šie divi identifikatori tiks apvienoti:

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

Pastāstiet, kāds būs kompilācijas rezultāts šim kodam:

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