SASS ရှိ Mixins ၏ ပါရာမီတာများ

SASS ရှိ mixins ၏ အရေးကြီးသော ထူးခြားချက်မှာ ၎င်းတို့သည် ပါရာမီတာများအတွင်း ကွင်းလုံးထဲတွင် ရေးသားထားပြီး၊ အကယ်၍ ကိန်းရှင်များ များပြားပါက ၎င်းတို့ကို ကော်မာဖြင့် ခွဲခြားထားသော ကိန်းရှင်များကို လက်ခံရယူခြင်းဖြစ်သည်။

အောက်ပါ ဥပမာကို ကြည့်ရှုကြပါစို့:

styles.scss@mixin active($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dotted;
  }
}
p {
  @include active(yellow, 2px);
}

ကြိုးချုပ်ခြင်း၏ ရလဒ်:

styles.cssp {
  border-color: yellow;
  border-width: 2px;
  border-style: dashed;
}

ထို့အပြင်၊ mixins များထံသို့ ပုံသေ တန်ဖိုးများကို ပေးပို့နိုင်သည်:

styles.scss@mixin active($color,  $width: 2px) {
  border: {
    color: $color;
    width: $width;
    style: dotted;
  }
}
p {
  @include active(yellow);
}
div {
  @include active(yellow, 4px);
}

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

styles.cssp {
  border-color: yellow;
  border-width: 2px;
  border-style: dotted;
}
div {
  border-color: yellow;
  border-width: 4px;
  border-style: dotted;
}

styles.scss@mixin simple-border($padding-top, $padding-bottom) {
  border: {
    padding-top: $padding-top;
    padding-bottom: $padding-bottom;
    color: green;
  }
}
p {
  @include simple-border(10px, 30px );
}

styles.scss@mixin simple-border($padding-top, $padding-bottom: 20px) {
  border: {
  padding-top: $padding-top;
  padding-bottom: $padding-bottom;
  color: green;
  }
}
p {
  @include simple-border(10px);
}