SASS параметрлеріндегі айнымалылар

Миксиннің немесе функцияның белгісіз саны параметрлерді қабылдауы керек болатын жағдайлар болады. Ол үшін SASS тілінде "айнымалы параметрлерді" беру мүмкіндігі бар, олар функцияда немесе миксинде соңғы көрсетіліп, берілген қалған параметрлерді тізімге жинайды.

Мұндай параметрлерден кейін көп нүкте қойылады. Келесі мысалды қарастырайық:

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

Компиляция нәтижесі:

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

Айнымалы функцияға немесе миксинге атталған параметрлер де берілуі мүмкін. Оларға қол жеткізу үшін keywords($args) функциясы қолданылады, ол оларды аттардың ($ белгісіз) мәндерге сәйкестігі ретінде қайтарады.

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

Компиляциядан кейін біз көреміз:

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

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