SASS-da parametrlardagi o'zgaruvchilar

Miksinni yoki funktsiyani noma'lum miqdordagi parametrlarni qabul qilishi kerak bo'lgan vaziyatlar bo'ladi. Buning uchun SASS tilida "o'zgaruvchan parametrlar" yoki parametrlarni uzatish imkoniyati mavjud, ular funktsiya yoki miksinda oxirgi bo'lib ko'rsatiladi va qolgan barcha uzatilgan parametrlarni ro'yxatga joylashtiradi.

Bunday parametrlardan keyin ko'p nuqta qo'yilishi kerak. Quyidagi misolni ko'rib chiqaylik:

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

Kompilyatsiya natijasi:

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

Funktsiya yoki miksining o'zgaruvchilariga nomi bilan berilgan parametrlarni ham uzatish mumkin. Ularga murojaat qilish uchun keywords($args) funktsiyasidan foydalaniladi, u ularni nomlar mosligi sifatida qaytaradi ($ belgisiz) qiymatlar.

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

Kompilyatsiyadan keyin biz ko'ramiz:

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

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