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

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

div {
	width: calc(100% - 10px);
}

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

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

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

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

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

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

ကုဒ်သည် မှန်ကန်စွာအလုပ်လုပ်စေရန် ပြင်ဆင်ပါ။

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

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