Sass preform a function on a list of variables - list

Question

I have set up variables for the colors that i want to work with, say:
$navy: #001F3F;
$blue: #0074D9;
$aqua: #7FDBFF;
$teal: #39CCCC;
Is there any way of defining a list like i did below, and then use functions on all variables in that list.
$colors:
($navy)($blue)($aqua)($teal);
I.e. darken all colors at once and put them inside a new list by doing something like?
$colors-dark:
#each $color in $colors {
$#{$color}-dark: darken($color, 10);
};
And will i then be able to, whenever i have an element i.e. a button that I might want to have a subclass for each color as a backgound option:
#each $color in $colors-dark {
.btn.#{$color} {
backgound-color:$color;
}
}
Would be such a time saver instead of the darken or lighten all colors one at a time.
Sorry if my question is poorly written, i just started getting into sass after years of plain css, and i'm still kind of unsure how sass work along with its limitations.
Best regards.

Answer 1

You can't define a list with an #each or create a new list/variable name with interpolation.
You can create map values with interpolation and get your desired outcome.
DEMO
// Put your colors in a map.
$colors: (
navy: #001F3F,
blue: #0074D9,
aqua: #7FDBFF,
teal: #39CCCC
);
// Create some empty global maps
$colors-dark: ();
$colors-light: ();
#each $key, $color in $colors {
// Make new maps for each iteration
$dark: (#{$key}-dark: darken($color, 10%));
$light: (#{$key}-light: lighten($color, 10%));
// Update global map with iteration map
$colors-dark: map-merge($colors-dark, $dark);
$colors-light: map-merge($colors-light, $light);
};
// Dark colors
#each $key, $color in $colors-dark {
.btn.#{$key} {
backgound-color: $color;
}
}
// Light colors
#each $key, $color in $colors-light {
.btn.#{$key} {
backgound-color: $color;
}
}