How to separate scss function returned values - css

Question

I have two SCSS maps call $my-map-1 and $my-map-2. Each map has the keys with their hex value. I wrote a function to return the key and the hex values ($key, $value) of each map separately.
After that, I wrote a #if condition with my function to check the map. I pass my map name to the function. If map there, check is the $key equal to the given name. If that true, pass the $valu of that $key to my color mixin. This is my code.
$my-map-1: (
map-1-color-1: #506c89,
map-1-color-2: #737373,
map-1-color-3: #2a3949,
map-1-color-4: #182028,
);
$my-map-2: (
map-2-color-1: #fff,
map-2-color-2: #000,
map-2-color-3: #ddd,
map-2-color-4: #ccc,
);
//the function to read te map and return the key and the value.
#function color-map($color-map) {
#each $key, $value in $color-map {
#return ($key, $value);
}
}
//mixin
#mixin color-mix($color){
color: $color;
}
//css classes from here
#if color-map($my-map-1) {
if($key == map-1-color-1) {
.my-class{
#include color-mix($color:$value);
}
}
}

Answer 1

You can use map-get method, it is very useful: http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method
This is an example of mixin. I pass as argument also your key: maybe it is better because you can check also others key names, if you need it:
$my-map-1: (
map-1-color-1: #506c89,
map-1-color-2: #737373,
map-1-color-3: #2a3949,
map-1-color-4: #182028
);
$my-map-2: (
map-2-color-1: #fff,
map-2-color-2: #000,
map-2-color-3: #ddd,
map-2-color-4: #ccc
);
#mixin color-map($color-map, $key-map) {
#each $key, $value in $color-map {
#if($key == $key-map) {
.my-class{
color: map-get($color-map, $key);
}
}
}
}
#include color-map($my-map-1, map-1-color-1);
Your output will be:
.my-class {
color: #506c89;
}