SASS တွင် Function များ

ဤသင်ခန်းစာတွင် function များကို မည်သို့အသုံးပြုရမည်ကို ကြည့်ရှုပါမည်။ Function များသည် mixin များနှင့် အနည်းငယ်ဆင်တူသော်လည်း ၎င်းတို့သည် ၎င်းတို့၏တန်ဖိုးများကို ပြောင်းလဲနိုင်သည့် parameter များထည့်သွင်းခွင့်ပြုသည်။

ဖောင့်အရွယ်အစားကို သတ်မှတ်ပေးမည့် func function တစ်ခုကို ပြုလုပ်ကြပါစို့။ အရွယ်အစားကို parameter တစ်ခုအနေဖြင့် လက်ခံပြီး variable တစ်ခုအနေဖြင့် လုပ်ဆောင်ပါစေ။

$font-size: 10px;

ထို့နောက် function အတွင်း $n parameter ကို ရေးပါ။ ထို့ပြင် function ကိုယ်ထည်အတွင်း @return ကို မဖြစ်မနေထည့်ရမည်။

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func(2);
}

Compile လုပ်ပြီးသောရလဒ် -

#main {
	font-size: 20px;
}

Function အတွင်းသို့ named argument ကိုလည်း ပို့ဆောင်နိုင်သည်။ ယခင်ဥပမာ၏အခြေအနေကို ပြန်ရေးကြည့်ပါ။

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func($n: 2);
}

ထို့ပြင် styles.css ဖိုင်ထဲတွင် ထိုကုဒ်အတိုင်း အတူတူပင် တွေ့ရပါမည်။

#main {
	font-size: 20px;
}

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

$size: 10px;
@function func($num) {
	@return $num + $size;
}
div {
	font-size: func(4);
}

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

$size: 4px;
@function func($num) {
	@return $num + $size;
}
.card {
	padding: func(2);
	margin: func(6);
	width: func(416);
}

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

$size: 2px;

@function func($num) {
	@return ($num * $size) + 20;
}

.logo {
	width: func(2);
	height: func(4);
}