Biến số trong Tham số SASS

Có những tình huống khi mixin hoặc hàm cần phải nhận một số lượng tham số không xác định. Vì vậy, trong ngôn ngữ SASS có khả năng truyền "các tham số biến đổi" hoặc các tham số, được chỉ định cuối cùng trong hàm hoặc mixin và đóng gói tất cả các tham số khác được truyền vào thành một danh sách.

Sau những tham số như vậy cần đặt dấu ba chấm. Hãy xem xét ví dụ sau:

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

Kết quả biên dịch:

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

Vào các biến của hàm hoặc mixin cũng có thể truyền các tham số có tên. Để có thể truy cập chúng, người ta sử dụng hàm keywords($args), hàm này trả về chúng dưới dạng một bản đồ tương ứng các tên (không có dấu $) với các giá trị.

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

Sau khi biên dịch chúng ta sẽ thấy:

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

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