Nhiều giá trị trong chỉ thị @each trong SASS

Chỉ thị @each có thể được áp dụng để tạo ra các danh sách kiểu phức tạp hơn. Để làm điều này, chúng ta viết nhiều biến, và trong danh sách các phần tử thêm các giá trị bổ sung.

Hãy xem ví dụ sau:

@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 ;
		}
	}

Kết quả biên dịch:

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;
}

Cũng bằng cách sử dụng phép gán nhiều có thể thêm các cặp giá trị vào danh sách:

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

Bây giờ hãy xem kết quả thu được:

div {
	font-size: 14px;
}

p {
	font-size: 12px;
}

Hãy cho biết, kết quả biên dịch của đoạn mã sau sẽ như thế nào:

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

Hãy thay đổi điều kiện của bài toán trước, để các phần tử navbar, link và span xuất hiện gạch chân văn bản dưới cùng, chấm chấm và lượn sóng tương ứng.