ค่าต่าง ๆ หลายค่าในคำสั่ง @each ใน SASS

คำสั่ง @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 มี ขีดเส้นใต้ข้อความแบบต่ำ ขีดประ และขีดคลื่น ตามลำดับ