SASS ရှိ သင်္ချာဆိုင်ရာ လုပ်ဆောင်ချက်များ

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

ဥပမာ

တန်ဖိုးနှစ်ခုကို ပေါင်းကြည့်ပါမည်။

p {
	font-size: 5px + 10px;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

p {
	font-size: 15px;
}

တစ်ခုသော တန်ဖိုးမှ အခြားတစ်ခုကို နုတ်ကြည့်ပါမည်။

p {
	font-size: 25px - 10px;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

p {
	font-size: 15px;
}

တန်ဖိုးကို ကိန်းတစ်ခုဖြင့် မြှောက်ကြည့်ပါမည်။

p {
	font-size: 5px * 5;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

p {
	font-size: 25px;
}

တန်ဖိုးကို ကိန်းတစ်ခုဖြင့် စားကြည့်ပါမည်။

div {
	width: 100% / 3;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

div {
	width: 33.33333333%;
}

ကိန်းရှင်၏ အကြောင်းအရာသို့ တန်ဖိုးတစ်ခုကို ပေါင်းထည့်ကြည့်ပါမည်။

$var: 100px;

div {
	width: $var + 100px;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

div {
	width: 200px;
}

ကိန်းရှင် နှစ်ခုကို ပေါင်းကြည့်ပါမည်။

$var1: 100px;
$var2: 200px;

div {
	width: $var1 + $var2;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

div {
	width: 300px;
}

ယူနစ်အမျိုးမျိုးဖြင့် လုပ်ဆောင်ချက်ကို ကြိုးစားသောအခါ SCSS သည် ယူနစ်အားလုံးကို တစ်ခုတည်းသို့ - ပထမဆုံးယူနစ်သို့ ပြောင်းလဲပေးပါသည်။ ဥပမာ။

div {
	width: 100% - 10px;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

div {
	width: 90%;
}

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

#block {
	width: 100px * 2;
}

#block {
	width: 200px / 3;
}

$var1: 500px;
$var2: 5;

#block {
	width: $var1 / $var2;
}