Generated by SassMeister.com.

input.scss

@use "sass:list";
@use "sass:string";
@use "sass:map";

@function unslash-colons($str) {
    $index: string.index($str, \:);
    @if $index != null {
        @return unslash-colons(string.slice($str, 1, $index - 1) + string.slice($str, $index + 1));
    } @else {
        @return $str;
    }
}

@mixin modifiers($map, $default-map: (), $prefix: '.-', $suffixes: \:hover \:active \:focus) {
    @each $pair in $map {
        $key: list.nth($pair, 1);
        $value: null;

        @if list.length($pair) > 1 {
            $value: list.nth($pair, 2);

        } @else if map.has-key($default-map, $key) {
            $value: map.get($default-map, $key);
        }

        @if $value != null {
            &#{$prefix}#{unslash-colons($key)} {
                @content($value);
            }
        } @else {
            @content($key);
        }

        @each $suffix in $suffixes {
            @if map.has-key($default-map, $key + $suffix) {
                $value: map.get($default-map, $key + $suffix);

                &#{$prefix}#{functions.unslash-colons($key + $suffix)} {
                    @content($value);
                }
            }
        }
    }
}

.button {
    @include modifiers((
        gold,
        primary red,
        primary\:hover pink,
        secondary blue,
        secondary\:hover lightblue,
    )) using ($color) {
        color: $color;
    }
}

output.css

.button {
  color: gold;
}
.button.-primary {
  color: red;
}
.button.-primary:hover {
  color: pink;
}
.button.-secondary {
  color: blue;
}
.button.-secondary:hover {
  color: lightblue;
}

settings.json

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