Muuttujat parametreissa SASS:ssa

On tilanteita, joissa mixin tai funktion on vastaanotettava tuntematon määrä parametreja. SASS-kielessä on tätä varten mahdollisuus lähettää "muuttuvat parametrit" tai parametrit, jotka määritetään viimeisiksi funktiossa tai mixinissä ja pakkaavat kaikki muut lähetetyt parametrit listaksi.

Tällaisten parametrien jälkeen tulee laittaa kolme pistettä. Tarkastellaan seuraavaa esimerkkiä:

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

Kokoamisen tulos:

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

Mixinin tai funktion muuttujiin voidaan myös lähettää nimettyjä parametreja. Jotta niihin voidaan viitata, käytetään funktiota keywords($args), joka palauttaa ne vastaavuutena nimistä (ilman merkkiä $) arvoihin.

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

Kokoamisen jälkeen näemme:

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

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