Multiple values in a directive @each in SASS

The @each directive can be used to create more complex style lists. To do this, we specify several variables and add additional values to the list of elements.

Let's consider the following example:

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

Compilation result:

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

You can also use multiple assignment to add pairs of values to a list:

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

Now let's look at the result:

div {
	font-size: 14px;
}

p {
	font-size: 12px;
}

Tell me what the result of compiling the following code will be:

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

Modify the conditions of the previous task so that the navbar, link, and span elements have underlined, dashed, and wavy text, respectively.

Multiple values ​​in a directive @each in SASS

Multiple values in a directive @each in SASS