Convert SASS map to individual variables [duplicate] - variables

Question

This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
Edit: I've come up with a solution, see my answer below.
Is there a way to do this? It is becoming quite cumbersome typing map-get($myArray, myKey). I have an array with dozens of values in, it would be very helpful if I could export them.
So that this:
$map: (
width: 100px,
height: 200px,
color: red,
background: blue
);
.myselector {
width: map-get($map, width);
height: map-get($map, height);
color: map-get($map, color);
background: map-get($map, background);
}
Becomes this:
$map: (
width: 100px,
height: 200px,
color: red,
background: blue
);
/* some function to convert the map to vars */
.myselector {
width: $width;
height: $height;
color: $color;
background:$background;
}
Please note that the example I have given is purely arbitrary.

Answer 1

Update: Ok, I've come up with a crafty half-fix. (Although this will be obvious to any discerning SCSS journeyman...)
As long as the elements you are trying to get are from the same array, you can always take advantage of the javascript style scope inheritance, and write a function with a short name that will pluck the element with the specified key from your array.
In reference to the example I gave originally:
#function g($key) {
#return array-get($map, $key);
}
.myselector {
width: g(width);
height: g(height);
color: g(color);
background: g(background);
}
For a single array with dozens of elements that you have to access frequently, it has the desired effect, and actually gives a feeling of the more convenient PHP style array syntax. i.e. instead of $g['width'] you use g(width)

Answer 2

$map: (
width: 100px,
height: 200px,
color: red,
background: blue
);
.myselector {
#each $prop, $val in $map {
#{$prop} : $val;
}
}
You can use #each. In the above #each loop, i'm cycling over each key/value pair in $map, assigning the key to $prop and the value to $val.
If you want, you can make a mixin (for example):
#mixin create-props($array) {
#each $prop, $val in $array {
#{$prop} : $val;
}
}
.myselector {
#include create-props($map);
}