Variablen in Parametern in SASS

Es gibt Situationen, in denen ein Mixin oder eine Funktion eine unbekannte Anzahl von Parametern entgegennehmen müssen. Dafür gibt es in der Sprache SASS die Möglichkeit, "variable Parameter" zu übergeben, oder Parameter, die als letzte in der Funktion oder im Mixin angegeben werden und alle weiteren übergebenen Parameter in einer Liste zusammenfassen.

Nach solchen Parametern muss man eine Ellipse setzen. Betrachten wir das folgende Beispiel:

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

Ergebnis der Kompilation:

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

An die Variablen einer Funktion oder eines Mixins können auch benannte Parameter übergeben werden. Um auf diese zugreifen zu können, verwendet man die Funktion keywords($args), die sie als eine Map (Zuordnung) von Namen (ohne das Zeichen $) zu Werten zurückgibt.

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

Nach der Kompilation sehen wir:

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

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