Generated by SassMeister.com.

input.scss

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

// Skip to line 50

@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);
                }
            }
        }
    }
}

// Look below this line

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

$site-colors: (
    primary orange,
    primary\:hover mango,
    secondary blue,
    secondary\:hover lightblue,
);

.messaging {
    @include modifiers($site-colors) using ($color) {
        background-color: $color;
        
        box-shadow: 0 0 10px 10px $color;
    }
}

output.css

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

.messaging.-primary {
  background-color: orange;
  box-shadow: 0 0 10px 10px orange;
}
.messaging.-primary:hover {
  background-color: mango;
  box-shadow: 0 0 10px 10px mango;
}
.messaging.-secondary {
  background-color: blue;
  box-shadow: 0 0 10px 10px blue;
}
.messaging.-secondary:hover {
  background-color: lightblue;
  box-shadow: 0 0 10px 10px lightblue;
}

settings.json

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