Variables dans les paramètres SASS

Il existe des situations où un mixin ou une fonction doivent accepter un nombre inconnu de paramètres. C'est pourquoi le langage SASS offre la possibilité de passer des "paramètres variables" ou des paramètres qui sont spécifiés en dernier dans la fonction ou le mixin et regroupent tous les autres paramètres passés dans une liste.

Après de tels paramètres, il faut mettre des points de suspension. Examinons l'exemple suivant :

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

Résultat de la compilation :

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

Des paramètres nommés peuvent également être passés aux variables de fonction ou de mixin. Pour pouvoir y accéder, on utilise la fonction keywords($args), qui les renvoie comme une correspondance des noms (sans le signe $) et des valeurs.

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

Après compilation, nous verrons :

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

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