พารามิเตอร์ของมิกซินใน SASS

คุณลักษณะสำคัญของมิกซิน ใน SASS คือ พวกมัน รับตัวแปรเป็นพารามิเตอร์, ซึ่งเขียนไว้ภายในวงเล็บ และหากมีตัวแปรหลายตัว, จะคั่นด้วยเครื่องหมายจุลภาค

พิจารณาตัวอย่างต่อไปนี้:

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

ผลลัพธ์ของการคอมไพล์:

p {
	border-color: yellow;
	border-width: 2px;
	border-style: dashed;
}

นอกจากนี้ ยังสามารถส่ง ค่าเริ่มต้นให้พารามิเตอร์ในมิกซินได้:

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

หลังจากการคอมไพล์ เราจะเห็น:

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

บอกหน่อยว่าผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:

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

บอกหน่อยว่าผลลัพธ์ของการคอมไพล์ โค้ดต่อไปนี้จะเป็นอย่างไร:

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