Premenné v parametroch v SASS

Vyskytujú sa situácie, keď mixin alebo funkcia musia prijať neznámy počet parametrov. Preto má jazyk SASS možnosť odovzdania "premenných parametrov" alebo parametrov, ktoré sú uvedené posledné vo funkcii alebo mixine a zabalia všetky ostatné odovzdané parametre do zoznamu.

Za takýmito parametrami je potrebné uviesť tri bodky. Pozrime sa na nasledujúci príklad:

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

Výsledok kompilácie:

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

Do premenných funkcie alebo mixinu je tiež možné odovzdávať pomenované parametre. Aby bolo možné k nim pristupovať, používa sa funkcia keywords($args), ktorá ich vráti ako zhodu mien (bez znamienka $) a hodnôt.

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

Po kompilácii uvidíme:

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

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