Sass variable not working in for - sass

Question

I have a problem converting a string to a variable, because it generates an error
I have tried in several ways to convert this variable into a line, in order to obtain the colors in the classes
c-gray + $i
SASS
$c-gray1: #666;
$c-gray2: #979797;
$c-gray3: #4c4c4c;
$c-gray4: #b9c6d1;
$c-gray5: #f7f8f9;
#for $i from 1 through 5 {
$colorsGrays: c-gray + $i;
$count: 1;
#each $color in $colorsGrays {
.gBgcGray#{$i} {
background-color: $color;
}
.gCGray#{$i} {
color: $color;
}
.g-bc--gray#{$i} {
border-color: $color;
}
$count: $count + 1;
}
}
OUTPUT:
.gBgcGray1 {
background-color: c-gray1;
}
.gCGray1 {
color: c-gray1;
}
.g-bc--gray1 {
border-color: c-gray1;
}
.gBgcGray2 {
background-color: c-gray2;
}
.gCGray2 {
color: c-gray2;
}
.g-bc--gray2 {
border-color: c-gray2;
}
.gBgcGray3 {
background-color: c-gray3;
}
.gCGray3 {
color: c-gray3;
}
.g-bc--gray3 {
border-color: c-gray3;
}
.gBgcGray4 {
background-color: c-gray4;
}
.gCGray4 {
color: c-gray4;
}
.g-bc--gray4 {
border-color: c-gray4;
}
.gBgcGray5 {
background-color: c-gray5;
}
.gCGray5 {
color: c-gray5;
}
.g-bc--gray5 {
border-color: c-gray5;
}
TEST: https://sass.js.org/
There is some way to generate a code with the correct one to get the values in the SASS and the OUTPUT

Answer 1

Sass can't resolve variables in this way, but you can use either list or map and resolve colors:
Using list:
$c-gray: #666 #979797 #4c4c4c #b9c6d1 #f7f8f9;
#for $i from 1 through 5 {
$colorsGrays: nth($c-gray, $i);
}
Using map:
$colors: (
c-gray1: #666,
c-gray2: #979797,
c-gray3: #4c4c4c,
c-gray4: #b9c6d1,
c-gray5: #f7f8f9,
);
#for $i from 1 through 5 {
$colorsGrays: map-get($colors, c-gray + $i);
}
Moreover in these cases you can use #each $colorGrays in $colors instead of #for