Generated by SassMeister.com.

input.scss

$color: white;
$colors: red, blue, green, yellow, tomato;

.group {
    .child {
        background-color: $color;
    }
    @each $color in $colors {
        .group--#{$color} .child {
            background-color: $color;
        }
    }
}

output.css

.group .child {
  background-color: white;
}
.group .group--red .child {
  background-color: red;
}
.group .group--blue .child {
  background-color: blue;
}
.group .group--green .child {
  background-color: green;
}
.group .group--yellow .child {
  background-color: yellow;
}
.group .group--tomato .child {
  background-color: tomato;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}