Sass - using different variables in #each [duplicate] - variables

Question

This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
I have widths of different planets
$mercury-width: 20px;
$venus-width: 30px;
$earth-width: 20px;
and their names:
`
$planets: mercury, venus, earth;
#each $planet in $planets {
.#{$planet} {
width: #{$planet}-width;
}
}
it doesn't work.
expected result:
.mercury {
width: 20px;
}
etc.
How can I do that?

Answer 1

How about this:
$planets-width: (mercury: 20px, venus: 30px, earth: 20px);
#each $name, $width in $planets-width {
.#{$name} {
width: $width;
}
}
Result:
/* line 3, ../scss/test.scss */
.mercury {
width: 20px;
}
/* line 3, ../scss/test.scss */
.venus {
width: 30px;
}
/* line 3, ../scss/test.scss */
.earth {
width: 20px;
}
If you want both color and size you can use nested maps:
$planets-map: (mercury: (width : 20px, color: red), venus: (width : 30px, color : purple), earth:( width: 20px, color: blue));
#each $name, $properties in $planets-map {
.#{$name} {
width: map-get($properties, width);
color: map-get($properties, color);
}
}
Result:
/* line 3, ../scss/test.scss */
.mercury {
width: 20px;
color: red;
}
/* line 3, ../scss/test.scss */
.venus {
width: 30px;
color: purple;
}
/* line 3, ../scss/test.scss */
.earth {
width: 20px;
color: blue;
}