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 को क्रमशः नीचे, डैश्ड और वेवी टेक्स्ट अंडरलाइन मिले।