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: (
    red: #f00,
    blue: #00f,
    green: #0f0,
);

:root {
    @each $k, $v in $colors {
        --#{"" + $k}: #{$v};
    }
}

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

@at-root {
    @include colors(core, hover, focus);
    @each $k, $v in (sm: 640, md: 768, lg: 1024) {
        @media (min-width: $v + px) {
            .#{$k}\: {
                @include colors(responsive);
            }
        }
    }
}

output.css

:root {
  --red: #f00;
  --blue: #00f;
  --green: #0f0;
}

.red {
  background-color: var(--red);
}
.hover\:red:hover {
  background-color: var(--red);
}

.focus\:red:focus {
  background-color: var(--red);
}

.blue {
  background-color: var(--blue);
}
.hover\:blue:hover {
  background-color: var(--blue);
}

.focus\:blue:focus {
  background-color: var(--blue);
}

.green {
  background-color: var(--green);
}
.hover\:green:hover {
  background-color: var(--green);
}

.focus\:green:focus {
  background-color: var(--green);
}

@media (min-width: 640px) {
  .sm\:red {
    background-color: var(--red);
  }

  .sm\:blue {
    background-color: var(--blue);
  }

  .sm\:green {
    background-color: var(--green);
  }
}
@media (min-width: 768px) {
  .md\:red {
    background-color: var(--red);
  }

  .md\:blue {
    background-color: var(--blue);
  }

  .md\:green {
    background-color: var(--green);
  }
}
@media (min-width: 1024px) {
  .lg\:red {
    background-color: var(--red);
  }

  .lg\:blue {
    background-color: var(--blue);
  }

  .lg\:green {
    background-color: var(--green);
  }
}

settings.json

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