Generated by SassMeister.com.

input.scss

@use 'sass:map';

$themes: ['default', 'yellow', 'purple-yellow', 'gold', 'midnight-blue', 'purple-blue'];
$themeIcons: ();

@each $theme in $themes {
    $index: index($themes, $theme);
    $themeIcons: map.set($themeIcons, $theme, 'theme#{$index}')
}


.blabla__image {
@each $theme, $iconName in $themeIcons {
      .t-color--#{$theme} & {
        background-image: url('~ASSETS/svg/single/dot-ring-#{$iconName}.svg');
      }
    }    
}

output.css

.t-color--default .blabla__image {
  background-image: url("~ASSETS/svg/single/dot-ring-theme1.svg");
}
.t-color--yellow .blabla__image {
  background-image: url("~ASSETS/svg/single/dot-ring-theme2.svg");
}
.t-color--purple-yellow .blabla__image {
  background-image: url("~ASSETS/svg/single/dot-ring-theme3.svg");
}
.t-color--gold .blabla__image {
  background-image: url("~ASSETS/svg/single/dot-ring-theme4.svg");
}
.t-color--midnight-blue .blabla__image {
  background-image: url("~ASSETS/svg/single/dot-ring-theme5.svg");
}
.t-color--purple-blue .blabla__image {
  background-image: url("~ASSETS/svg/single/dot-ring-theme6.svg");
}

settings.json

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