SASS ရှိ Mixins များ၏ အမည်ပေးထားသော ပါရာမီတာများ

Mixins များအတွက် အမည်ပေးထားသော ပါရာမီတာများကို သတ်မှတ်နိုင်ပါသည်။ အောက်ပါ ဥပမာဖြင့် ကြည့်ရှုကြပါစို့။

@mixin active($color) {
	border: {
		color: $color;
		style: solid;
	}
}
p {
	@include active($color: orange);
}
div {
	@include active($color: green);
}

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

p {
	border-color: orange;
	border-style: solid;
}
div {
	border-color: green;
	border-style: solid;
}

ထို့အပြင်၊ mixins များသို့ ပုံသေတန်ဖိုး (default value) ပါရာမီတာများကို လွှဲပေးနိုင်ပါသည်။

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

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

p {
	border-color: yellow;
	border-width: 2px;
	border-style: dotted;
}
div {
	border-color: yellow;
	border-width: 4px;
	border-style: dotted;
}

အောက်ပါကုဒ် compile လုပ်ပြီးသော အဖြေက ဘာဖြစ်မည်နည်း။

@mixin super-button($color, $background-color, $border-radius) {
	color: $color;
	background-color: $background-color;
	border-radius: $border-radius;
}
.active-button {
	@include super-button($color: white,  $background-color: red, $border-radius: 2px);
}

အောက်ပါကုဒ် compile လုပ်ပြီးသော အဖြေက ဘာဖြစ်မည်နည်း။

@mixin super-button($color, $background-color, $border-radius: 5px) {
	color: $color;
	background-color: $background-color;
	border-radius: $border-radius;
}
.active-button {
	@include super-button($color: white,  $background-color: red);
}

အောက်ပါကုဒ် compile လုပ်ပြီးသော အဖြေက ဘာဖြစ်မည်နည်း။

@mixin super-button($color, $background-color: orange, $border-radius: 5px) {
	color: $color;
	background-color: $background-color;
	border-radius: $border-radius;
}
.active-button {
	@include super-button($color: white, $border-radius:3px);
}