Generated by SassMeister.com.

input.scss

@use 'sass:map';

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

@mixin themesIcon($icon) {
    @each $theme in $themes {
      .t-color--#{$theme} & {
        background-image: url('~ASSETS/svg/single/#{$theme}/#{$icon}.svg');
      }
    }    
}


.blabla__image {
    @include themesIcon('dot-ring');
}

output.css

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

settings.json

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