SASS-এ ফাংশন

এই পাঠে আমরা কিভাবে ফাংশন ব্যবহার করতে হয় তা দেখব। ফাংশনগুলি, মিক্সিনের মতো কিছুটা সদৃশ, তবে তারা প্যারামিটার যোগ করতে দেয়, যা তাদের মান পরিবর্তন করতে পারে।

আসুন একটি ফাংশন func তৈরি করি যা ফন্টের আকার সেট করবে। আকারটি যেন একটি প্যারামিটার হিসেবে প্রেরণ করা হয় এবং প্যারামিটার হিসেবে একটি ভেরিয়েবল কাজ করুক:

$font-size: 10px;

তারপর ফাংশনে প্যারামিটার লিখুন $n এবং অবশ্যই ফাংশনের বডিতে @return উল্লেখ করুন:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func(2);
}

কম্পাইলেশনের ফলাফল:

#main {
	font-size: 20px;
}

এছাড়াও আপনি ফাংশনে একটি নামযুক্ত আর্গুমেন্ট পাস করতে পারেন। আগের উদাহরণের শর্তগুলি পুনরায় লিখুন:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func($n: 2);
}

এবং styles.css ফাইলে আমরা একই কোড দেখতে পাব:

#main {
	font-size: 20px;
}

বলুন, নিম্নলিখিত কোড কম্পাইল করার ফলাফল কী হবে?

$size: 10px;
@function func($num) {
	@return $num + $size;
}
div {
	font-size: func(4);
}

বলুন, নিম্নলিখিত কোড কম্পাইল করার ফলাফল কী হবে?

$size: 4px;
@function func($num) {
	@return $num + $size;
}
.card {
	padding: func(2);
	margin: func(6);
	width: func(416);
}

বলুন, নিম্নলিখিত কোড কম্পাইল করার ফলাফল কী হবে?

$size: 2px;

@function func($num) {
	@return ($num * $size) + 20;
}

.logo {
	width: func(2);
	height: func(4);
}