SASS-এ ভেরিয়েবল প্যারামিটার

এমন পরিস্থিতি arises যখন একটি মিক্সিন বা ফাংশনকে গ্রহণ করতে হয় অজানা সংখ্যক প্যারামিটার। এই জন্য SASS ভাষায় "ভেরিয়েবল প্যারামিটার" বা প্যারামিটার প্রেরণের ক্ষমতা আছে যেগুলো ফাংশনে শেষে নির্দিষ্ট করা হয় বা মিক্সিন এবং অন্য সবগুলো প্যাক করে প্রেরিত প্যারামিটার একটি তালিকায়।

এই ধরনের প্যারামিটারের পরে একটি ellipsis রাখতে হবে। নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

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