ตัวแปรในพารามิเตอร์ใน SASS

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

หลังพารามิเตอร์ดังกล่าวจำเป็นต้องใส่จุดไข่ปลา ลองพิจารณาตัวอย่างต่อไปนี้:

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

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

div {
	-moz-box-content-padding: 0px 4px 5px 2px;
	-webkit-box-content-padding: 0px 4px 5px 2px;
}

ไปยังตัวแปรของฟังก์ชันหรือมิกซ์อินก็ สามารถส่งพารามิเตอร์ที่มีชื่อได้ เพื่อที่จะสามารถอ้างอิงถึงพวกมันได้ ให้ใช้ฟังก์ชัน keywords($args) ซึ่งคืนค่าพวกมันเป็นความสัมพันธ์ ของชื่อ (ไม่มีเครื่องหมาย $) กับค่า

@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...);
}

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

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

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