Meervoudige waardes in die @each richtlijn in SASS

Die @each richtlijn kan gebruik word om meer komplekse stylelyste saam te stel. Om dit te doen, skryf ons verskeie veranderlikes, en voeg bykomende waardes by die lys van elemente.

Kom ons kyk na die volgende voorbeeld:

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

Die resultaat van kompilering:

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

Deur meervoudige toekenning te gebruik kan jy ook waardepare by die lys voeg:

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

Laat ons nou kyk na die resultaat:

div {
	font-size: 14px;
}

p {
	font-size: 12px;
}

Vertel, wat sal die resultaat van die kompilering van die volgende kode wees:

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

Verander die voorwaardes van die vorige taak, sodat die elemente navbar, link en span onderskeidelik onderste, gestreepte en golwende onderstreping van die teks kry.