SASS တွင် @extend ကိုသုံး၍ selector အစဉ်အတန်းများပေါင်းစည်းခြင်း

ကျွန်ုပ်တို့သည် selector အစဉ်အတွင်းကိုပေါင်းစည်းရန်လိုအပ်ပါက @extend directive ကိုလည်းအသုံးပြုပါသည်။

အောက်ပါဥပမာကိုကြည့်ပါ။

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

css ဖိုင်ထဲရှိ compiled code ကိုသတိပြုပါ။ ဘုံ selector မရှိသော အစဉ်အတန်းနှစ်ခုကိုပေါင်းစည်းသည့်အခါ selector အသစ်များသည် အလိုအလျောက်ဖွဲ့စည်းလာသည်။ ပထမတစ်ခုသည် ဒုတိယတစ်ခုမတိုင်မီ ပထမအစဉ်အတန်းဖြင့်ဖြစ်ပြီး တစ်ခုမှာ ဒုတိယအစဉ်အတန်းကို ပထမတစ်ခုမတိုင်မီထားသည်။

#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;
}