Variablat në Parametra në SASS

Ndodh situata kur një mixin ose funksion duhet të pranojë një numër të panjohur parametrash. Për këtë në gjuhën SASS ekziston mundësia e transmetimit të "parametrave të ndryshueshëm" ose parametrave, që specifikohen të fundit në funksion ose mixin dhe i paketojnë të gjithë parametrat e tjerë të transmetuar në një listë.

Pas parametrave të tillë duhet vendosur elipsë. Le të shqyrtojmë shembullin e mëposhtëm:

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

Rezultati i kompilimit:

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

Në variablat e funksionit ose mixin-it gjithashtu mund të transmetohen parametra të emërtuar. Për t'iu qasur atyre përdorin funksionin keywords($args), i cili i kthen ata si një korrespondencë emrash (pa shenjën $) me vlera.

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

Pas kompilimit do të shohim:

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

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