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

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

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

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

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

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