LESS ရှိ Mixins များ

ဤသင်ခန်းစာတွင် mixins (ပေါင်းစပ်ခြင်း) များနှင့် မိတ်ဆက်ပါမည်။ ထိုသို့ပြုလုပ်ခြင်းဖြင့် တစ်ခုသော class ကို အခြား class အတွင်းသို့ ထည့်သွင်းနိုင်ပါသည်။ အဘယ်အရာဖြစ်သည်နှင့် ၎င်းနှင့် အလုပ်လုပ်ပုံကို ဆန်းစစ်ကြည့်ရအောင်။

�ခြေခံအားဖြင့် mixin ဆိုသည်မှာ class တစ်ခုကို အခြား class အတွင်း အသုံးပြုခြင်းဖြစ်ပြီး၊ တစ်ခုသော class သည် ကြိုတင်ပြင်ဆင်ထားသော ကုဒ်အပိုင်းအစတစ်ခု ဖြစ်ပါသည်။ ထိုကုဒ်ကို နေရာများစွာတွင် ကျွန်ုပ်တို့ အသုံးပြုနိုင်ပါသည်။

၎င်းက မည်သည့်နည်းနှင့် အဆင်ပြေသနည်း။ ပုံစံကျ CSS တွင် ကျွန်ုပ်တို့သည် လိုအပ်သည့်နေရာတိုင်းတွင် ကြိုတင်ပြင်ဆင်ထားသော ကုဒ်ကို ရိုက်ထည့်ရန် လိုအပ်မည်ဖြစ်သော်လည်း၊ LESS တွင် ထိုကုဒ်ကို တစ်နေရာတည်းတွင် ရေးပြီး ၎င်းကို ကုဒ်၏လိုအပ်သည့်နေရာများတွင် ချိတ်ဆက်နိုင်ပါသည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါ class ရှိသည်ဆိုပါစို့။

styles.less.mix {
  width: 100px;
  height: 100px;
}

ဤ class ကို mixin အဖြစ် အသုံးပြုကြပါစို့။

styles.lessp {
  .mix;
  color: red;
}

ရလဒ်အနေဖြင့်၊ စာပိုဒ်အတွင်းသို့ ကျွန်ုပ်တို့၏ class ၏ style များ ထည့်သွင်းပေးပါလိမ့်မည်။

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

Задание 1

အောက်ပါကုဒ်၏ ရလဒ်က မည်သို့ဖြစ်မည်ကို ရှင်းပြပါ။

styles.less.mix {
  color: white;
  background: black;
}

p {
  .mix;
  width: 300px;
}