LESS ရှိ Media Queries များ

ဒြပ်စင်တစ်ခုသို့ media query ထည့်ပေးမယ့် function တစ်ခုလုပ်ကြည့်ရအောင်။ ဥပမာအနေနဲ့ မိုဘိုင်းကိရိယာများအတွက် style များကို ထိန်းညှိပေးသော query တစ်ခုဖြစ်ပါစေ။ ကျွန်ုပ်တို့၏ function ကို သင့်လျော်စွာ နာမည်ပေးကြပါစို့ -

styles.less.mobile(@code) {

}

ကျွန်ုပ်တို့၏ function သည် parameter အဖြစ် code block တစ်ခုကို လက်ခံပါလိမ့်မည်။ ထို code block ကို media query အတွင်းမှာ �ုတ်ကြည့်ရအောင် -

styles.less.mobile(@code) {
  @media (max-width: 600px) {
    @code();
  }
}

ယခု ကျွန်ုပ်တို့၏ function ကို အသုံးပြုကြပါစို့ -

styles.lessdiv {
  .mobile({
    width: 300px;
  });
}

ရလဒ်အနေနဲ့ compilation ပြီးနောက် ကျွန်ုပ်တို့၏ div သည် media query အတွင်းသို့ ရောက်သွားပြီး သက်ဆိုင်ရာ style များကို ရရှိသွားပါမည် -

styles.less@media (max-width: 600px) {
  div {
    width: 300px;
  }
}