Variabelen in parameters in SASS

Er zijn situaties waarin een mixin of functie een onbekend aantal parameters moet accepteren. Daarvoor heeft de SASS-taal de mogelijkheid om "variabele parameters" door te geven, of parameters, die als laatste worden gespecificeerd in de functie of mixin en alle andere doorgegeven parameters in een lijst verpakken.

Na dergelijke parameters moeten we een beletselteken plaatsen. Laten we het volgende voorbeeld bekijken:

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

Resultaat van compilatie:

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

Aan de variabelen van de functie of mixin kunnen ook genaamde parameters worden doorgegeven. Om ze te kunnen benaderen, gebruiken ze de functie keywords($args), die ze retourneert als een mapping van namen (zonder het $ teken) naar waarden.

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

Na compilatie zien we:

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

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