Generated by SassMeister.com.

input.scss

$colorsmap: (
    1: a,
    2: b,
    3: c
);

.colors {
    @each $key, $value in $colorsmap {
        --#{$key}: --#{$value};
    }
}

@mixin load-colors($component, $themes...) {
    @each $theme in $themes {
        #{$component}: #{$theme};
    }
}

.scope {
    $component: "card-potatos";
    .themes {
        @include load-colors($component, dark, light);
    }
}

output.css

.colors {
  --1: --a;
  --2: --b;
  --3: --c;
}

.scope .themes {
  card-potatos: dark;
  card-potatos: light;
}

settings.json

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