Valeurs multiples dans la directive @each dans SASS

La directive @each peut être utilisée pour créer des listes de styles plus complexes. Pour cela, nous spécifions plusieurs variables, et dans la liste des éléments nous ajoutons des valeurs supplémentaires.

Prenons l'exemple suivant :

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

Résultat de la compilation :

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

De même, en utilisant l'assignation multiple, on peut ajouter des paires de valeurs dans la liste :

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

Regardons maintenant le résultat obtenu :

div {
	font-size: 14px;
}

p {
	font-size: 12px;
}

Expliquez quel sera le résultat de la compilation du code suivant :

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

Modifiez les conditions de la tâche précédente pour que les éléments navbar, link et span aient respectivement un soulignement de texte inférieur, pointillé et ondulé.