Variabler i parametre i SASS

Der er situationer, hvor en mixin eller en funktion skal modtage et ukendt antal parametre. Derfor har SASS sproget muligheden for at overføre "variable parametre" eller parametre, som er angivet sidst i funktionen eller mixinen og pakker alle de andre overførte parametre ind i en liste.

Efter sådanne parametre skal der sættes en ellipse. Lad os overveje følgende eksempel:

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

Kompileringsresultat:

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

Variable funktions- eller mixin-parametre kan også overføre navngivne parametre. For at kunne tilgå dem bruger man funktionen keywords($args), som returnerer dem som en mapping af navne (uden tegnet $) til værdier.

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

Efter kompilering vil vi se:

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

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