I'm having trouble using an each loop in Sass because the css is compiling with the variable names instead of their content.
$green-1: #9ae200;
$green-2: #5ea600;
$color-list: green-1 green-2;
@each $single-color in $color-list {
&.#{$single-color} {
background-color: $single-color;
}
}
The desired output is:
.green-1 {
background-color:#9ae200;
}
.green-2 {
background-color:#5ea600;
}
However, the css is currently compiling as:
.green-1 {
background-color:green-1;
}
.green-2 {
background-color:green-2;
}
As an attempt to add the dollar sign, I tried:
@each $single-color in $color-list {
@function create-variable($variable){
@return "$" + $variable;
}
&.#{$single-color} {
background-color: create-variable($single-color);
}
}
Unfortunately, this compiled as:
.green-1 {
background-color:$green-1;
}
.green-2 {
background-color:$green-2;
}
It seems that Sass is not interpreting the variables correctly. Does anyone know how to solve this issue?