SASS-এ @each ডাইরেক্টিভে একাধিক মান

@each ডাইরেক্টিভটি আরও জটিল স্টাইলের তালিকা তৈরি করতে ব্যবহার করা যেতে পারে। এটি করার জন্য, আমরা একাধিক ভেরিয়েবল নির্দিষ্ট করি, এবং উপাদানের তালিকায় অতিরিক্ত মান যোগ করি।

নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

@each $picture, $color, $padding in
	(winter, blue, 10px),
	(spring, green, 12px),
	(summer, yellow, 14px),
	(autumn, brown, 16px) {
		img.#{$picture} {
			background-image: url('/images/#{$picture}.png');
			border: 4px solid $color;
			padding: $padding ;
		}
	}

কম্পাইল করার ফলাফল:

img .winter {
	background-image: url("/images/winter.png");
	border: 4px solid blue;
	padding: 10px;
}

img .spring {
	background-image: url("/images/spring.png");
	border: 4px solid green;
	padding: 12px;
}

img .summer {
	background-image: url("/images/summer.png");
	border: 4px solid yellow;
	padding: 14px;
}

img .autumn {
	background-image: url("/images/autumn.png");
	border: 4px solid brown;
	padding: 16px;
}

এছাড়াও একাধিক অ্যাসাইনমেন্ট ব্যবহার করে মানের জোড়া তালিকায় যোগ করা যেতে পারে:

@each $elem, $font-size in (div: 14px, p: 12px) {
	#{elem} {
		font-size: $font-size;
	}
}

এখন ফলাফল দেখি:

div {
	font-size: 14px;
}

p {
	font-size: 12px;
}

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

@each $elem, $size, $color in 
(navbar: 14px blue, link: 12px red, span: 10px green) {
	#{$elem} {
			font-size: $size;
			color: $color;
	}
}

পূর্ববর্তী কাজের শর্তগুলি পরিবর্তন করুন, যাতে navbar, link এবং span উপাদানগুলির ক্ৰমে নীচের, ড্যাশযুক্ত এবং তরঙ্গায়িত টেক্সট আন্ডারলাইন উপস্থিত হয়।