SASS ရှိ ပါရာမီတာများအတွင်း ကိန်းရှင်များ

မိတ်ဆင်သို့မဟုတ် လုပ်ဆောင်ချက်တစ်ခုသည် မသိရသေးသော ပါရာမီတာအရေအတွက်ကို လက်ခံရန် လိုအပ်သည့် အခြေအနေများ ရှိပါသည်။ ဤအတွက် SASS ဘာသာစကားတွင် "ကိန်းရှင် ပါရာမီတာများ" သို့မဟုတ် လုပ်ဆောင်ချက်သို့မဟုတ် မိတ်ဆင်အတွင်း နောက်ဆုံးထားရှိသော ပါရာမီတာများဖြစ်ပြီး ကျန်လွှဲပြောင်းပေးထားသော ပါရာမီတာများအားလုံးကို စာရင်းတစ်ခုအဖြစ် ထုပ်ပိုးပေးသည့် စွမ်းရည်ရှိပါသည်။

ထိုသို့သော ပါရာမီတာများနောက်တွင် အစက်သုံးစက် (ellipsis) ထည့်ရန် လိုအပ်ပါသည်။ အောက်ပါ ဥပမာကို ကြည့်ရှုပါမည်။

styles.scss@mixin box-content-padding($padding...) {
  -moz-box-content-padding: $padding;
  -webkit-box-content-padding: $padding;
}
div {
  @include box-content-padding(0px 4px 5px 2px);
}

ကွန်ပါလာဖြစ်သော ရလဒ်:

styles.cssdiv {
  -moz-box-content-padding: 0px 4px 5px 2px;
  -webkit-box-content-padding: 0px 4px 5px 2px;
}

လုပ်ဆောင်ချက် သို့မဟုတ် မိတ်ဆင်၏ ကိန်းရှင်များထံသို့ အမည်ပေးထားသော ပါရာမီတာများကိုလည်း လွှဲပြောင်းပေးနိုင်ပါသည်။ ၄င်းတို့ကို ရည်ညွှန်းနိုင်ရန်အတွက် keywords($args) လုပ်ဆောင်ချက်ကို အသုံးပြုကြပြီး၊ ထိုလုပ်ဆောင်ချက်သည် ၎င်းတို့ကို အမည်များ ($ သင်္ကေတမပါ) ႏွင့် တန်ဖိုးများ၏ တစ်ထပ်တည်းမှုအဖြစ် ပြန်ပေးပါသည်။

styles.scss@mixin common-colors($text-color, $background, $shadow) {
  color: $text-color;
  background-color: $background;
  box-shadow: $shadow;
}

$values: white, green, grey;

.primary {
  @include common-colors($values...);
}

$value-map: (text-color: black, background: grey, shadow: green);

.secondary {
  @include common-colors($value-map...);
}

ကွန်ပါလာပြီးနောက် ကျွန်ုပ်တို့ မြင်ရမည့်အရာ:

styles.css.primary {
  color: white;
  background-color: green;
  box-shadow: grey;
}

.secondary {
  color: black;
  background-color: grey;
  box-shadow: green;
}