Generated by SassMeister.com.

input.scss

@use "sass:string";

@function replace($str, $s1, $s2) {
    $n: string.index($str, $s1);
    @return string.slice($str, 1, $n - 1) + $s2 + string.slice($str, $n + string.length($s1));
}

@mixin variants($variants...) {
    @each $variant in $variants {
        @if $variant == core {
            @content;
        } @else if $variant == hover {
            @at-root {
                .hover\:#{string.slice("" + &, 2)}:hover {
                    @content;
                }
            }
        } @else if $variant == focus {
            @at-root {
                .focus\:#{string.slice("" + &, 2)}:focus {
                    @content;
                }
            }
        } @else if $variant == responsive {
            @at-root {
                .#{replace(string.slice("" + &, 2), "\\: .", "\\:")} {
                    @content;
                }
            }
        }
    }
}

$colors: (
    my-red: var(--my-red),
    my-blue: var(--my-blue),
    my-green: var(--my-green),
);

@mixin colors($variants...) {
    @each $k, $v in $colors {
        .#{$k} {
            @include variants($variants...) {
                background-color: $v;
            }
        }
    }
}

$breakpoints: (
    xs: 512,
    sm: 640,
    md: 768,
    lg: 1024,
    // 2xl: 1280,
);

@function color-props() {
    @return (
        color: color,
        bg: background-color,
        border: border,
    ); 
}

@at-root {
    // @include colors(core);
    // @each $k, $v in $breakpoints {
    //     @media (min-width: $v + px) {
    //         .#{$k}\: {
    //             @include colors(responsive);
    //         }
    //     }
    // }
    
    $colors: (
        my-red: var(--my-red),
        my-blue: var(--my-blue),
        my-green: var(--my-green),
    );
    
    $shadows: (
        my-shadow: var(--my-shadow),
    );

    @each $k1, $v1 in color-props() {
        @each $k2, $v2 in $colors {
            .#{$k1}-#{$k2} {
                // --#{$k1}-opacity: 1;
                #{$v1}: $v2;
            }
        }
    }
    @each $k, $v in $shadows {
        .shadow-#{$k} {
            box-shadow: $v;
        }
    }
}

output.css

.color-my-red {
  color: var(--my-red);
}

.color-my-blue {
  color: var(--my-blue);
}

.color-my-green {
  color: var(--my-green);
}

.bg-my-red {
  background-color: var(--my-red);
}

.bg-my-blue {
  background-color: var(--my-blue);
}

.bg-my-green {
  background-color: var(--my-green);
}

.border-my-red {
  border: var(--my-red);
}

.border-my-blue {
  border: var(--my-blue);
}

.border-my-green {
  border: var(--my-green);
}

.shadow-my-shadow {
  box-shadow: var(--my-shadow);
}

settings.json

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