SASS'ta Parametrelerde Değişkenler

Mixin veya fonksiyonun bilinmeyen sayıda parametre kabul etmesi gereken durumlar olabilir. Bu nedenle SASS dilinde, "değişken parametreler" veya fonksiyon veya mixin içinde sona konulan ve iletilen diğer tüm parametreleri bir listeye paketleyen parametreler iletme imkanı vardır.

Bu tür parametrelerden sonra üç nokta konulmalıdır. Aşağıdaki örneği inceleyelim:

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

Derleme sonucu:

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

Fonksiyon veya mixin değişkenlerine isimlendirilmiş parametreler de iletilmektedir. Bunlara erişmek için, değerleri isimlere ($ işareti olmadan) karşılık gelen bir eşleme olarak döndüren keywords($args) fonksiyonu kullanılır.

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

Derlemeden sonra şunu göreceğiz:

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

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