Variabel dalam Parameter di SASS

Ada situasi ketika mixin atau fungsi harus menerima jumlah parameter yang tidak diketahui. Untuk itu dalam bahasa SASS ada kemungkinan untuk meneruskan "parameter variabel" atau parameter, yang ditentukan terakhir dalam fungsi atau mixin dan mengemas semua parameter lain yang diteruskan ke dalam sebuah daftar.

Setelah parameter seperti itu perlu diberi tanda elipsis (...). Mari kita lihat contoh berikut:

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

Hasil kompilasi:

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

Ke dalam variabel fungsi atau mixin juga dapat diteruskan parameter bernama. Untuk dapat mengaksesnya mereka menggunakan fungsi keywords($args), yang mengembalikannya sebagai peta nama (tanpa tanda $) dan nilai.

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

Setelah kompilasi kita akan melihat:

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

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