SASS හි @extend හි selector අනුක්‍රම ඒකාබද්ධ කිරීම

අපට selector අනුක්‍රම ඒකාබද්ධ කිරීමට අවශ්‍ය නම්, අපි @extend නියෝගයද භාවිතා කරමු:

පහත උදාහරණය සලකා බලමු:

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

css ගොනුවේ සම්පාදනය කරන ලද කේතයට අවධානය යොමු කරන්න, පොදු selectors නොමැති අනුක්‍රම දෙකක් ඒකාබද්ධ කිරීමේදී, ස්වයංක්‍රීයව නව selectors සෑදේ: පළමු අනුක්‍රමය දෙවැන්නට පෙර එකක් සහ දෙවන අනුක්‍රමය පළමු එකට පෙර එකක්:

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

අනුක්‍රමවලට පොදු selector එකක් ඇති විට, ඒවා එකට ඒකාබද්ධ වන අතර වෙනස්කම් පමණක් (එසේ පවතී නම්) අදාළ වේ. පහත උදාහරණයේ අනුක්‍රම දෙකටම #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;
}