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 මූලද්‍රව්‍ය සඳහා පිළිවෙලින් යටින් ඉරි, ඉරි ඉරි සහ රැලි සහිත පෙළ යටින් ඉරි ඇති වන පරිදි පෙර ගැටලුවේ කොන්දේසි වෙනස් කරන්න.