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

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

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

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

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

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

අනුක්‍රමවලට පොදු selector එකක් ඇති විට, ඒවා එකට ඒකාබද්ධ වන අතර වෙනස්කම් පමණක් (එසේ පවතී නම්) අදාළ වේ. පහත උදාහරණයේ අනුක්‍රම දෙකටම #main හඳුන්වන යතුර ඇත:

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

සම්පාදනයේ ප්‍රතිඵලයක් ලෙස මෙම හඳුන්වන යතුරු දෙක ඒකාබද්ධ වේ:

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

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