Generated by SassMeister.com.

input.scss

@use "sass:string";

@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 {
            @each $k, $v in (sm: 640, md: 768, lg: 1024) {
                @media (min-width: $v + px) {
                    @at-root {
                        .#{$k}\:#{string.slice("" + &, 2)} {
                            @content;
                        }
                    }
                }
            }
        }
    }
}

$colors: (red, blue, green);

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

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

@at-root {
    @include colors(core, hover, focus);
    @include colors(responsive);
}

output.css

:root {
  --red: red;
  --blue: blue;
  --green: green;
}

.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);
  }
}
@media (min-width: 768px) {
  .md\:red {
    background-color: var(--red);
  }
}
@media (min-width: 1024px) {
  .lg\:red {
    background-color: var(--red);
  }
}

@media (min-width: 640px) {
  .sm\:blue {
    background-color: var(--blue);
  }
}
@media (min-width: 768px) {
  .md\:blue {
    background-color: var(--blue);
  }
}
@media (min-width: 1024px) {
  .lg\:blue {
    background-color: var(--blue);
  }
}

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

settings.json

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