LESS တွင် သင်္ချာဆိုင်ရာ လုပ်ဆောင်ချက်များကို ဖျက်သိမ်းခြင်း

တစ်ခါတစ်ရံတွင် ကျွန်ုပ်တို့တွင် LESS အနေဖြင့် တွက်ချက်မှုအမိန့်တစ်ခုအဖြစ် မယူမှတ်သင့်သော သင်္ချာဆိုင်ရာ လုပ်ဆောင်ချက်တစ်ခု ရှိတတ်ပါသည်။ ဥပမာအားဖြင့်၊ ထိုကဲ့သို့သော ပြဿနာသည် CSS function calc တွင်ပေါ်လာတတ်သည်။

styles.lessdiv {
  width: calc(100% - 10px);
}

ကံကောင်းထောက်မစွာ၊ LESS သည် ထိုကဲ့သို့သောနေရာများကို မှန်ကန်စွာ ကိုင်တွယ်နိုင်ပြီး compile လုပ်သည့်အခါတွင် တွက်ချက်မှုကို လုပ်ဆောင်မည်မဟုတ်ပါ။

သို့သော် တွက်ချက်မှုမလိုအပ်သော expression သည် အခြားနေရာတစ်ခုတွင် ရှိနေသည့်အခြေအနေများလည်း ရှိတတ်သည်၊ ဥပမာ- variable တစ်ခုအတွင်း ဤကဲ့သို့ဖြစ်သည်။

styles.less@exp: 100% - 10px;
div {
  width: calc(@exp);
}

ဤကိစ္စတွင်၊ တွက်ချက်မှုရလဒ်ကို variable ထဲသို့ ရေးထည့်မည်ဖြစ်ပြီး တွက်ချက်ပြီးသားတန်ဖိုးပါ variable ကို calc သို့ ပို့ပေးမည်ဖြစ်သည်။ ထိုသို့မဖြစ်စေရန်၊ expression သည် မပြောင်းလဲဘဲ မူလအတိုင်းရှိနေရမည်ကို ကျွန်ုပ်တို့ ရှင်းရှင်းလင်းလင်း ဖော်ပြနိုင်သည်။

ထိုသို့လုပ်ဆောင်ရန်၊ expression ကို ကိုးကားခြက်များထဲသို့ ထည့်ပြီး ယင်း၏ရှေ့တွင် tilde သင်္ကေတ (~) ကို ထားရပါမည်။

styles.less@exp: ~'100% - 10px';
div {
  width: calc(@exp);
}

styles.less@exp1: 80% + 10px;
@exp2: 30vh - 10px;

div {
  width: calc(@exp1);
  margin-top: calc(@exp2);
}