Generated by SassMeister.com.

input.scss

@use "sass:list";
@use "sass:meta";

@function no-op($selector) {
    @return ".#{$selector}";
}
@function hover($selector) {
    @return ".hover\\:#{$selector}:hover";
}
@function focus($selector) {
    @return ".focus\\:#{$selector}:focus";
}
@function group-hover($selector) {
    @return ".group-hover:hover .group-hover\\:#{$selector}";
}
@function group-focus($selector) {
    @return ".group-focus:focus .group-focus\\:#{$selector}";
}
@function responsive($selector) {
    @return "#{&}\\:#{$selector}";
}

// TODO: Change to `for-loop`.
@mixin variants($variants) {
    @content(no-op);
    @each $v in $variants {
        @if
          $v == hover or
          $v == focus or
          $v == group-hover or
          $v == group-focus {
            @content($v);
        }
    }
    @if list.index($variants, responsive) {
        @each $mk, $mv in (sm: 640, md: 768, lg: 1024, xl: 1280) {
          @media (min-width: #{$mv + px}) {
              .#{$mk} {
                @at-root {
                    @content(responsive);
                }
              }
          }
        }
    }
}

@function variant($fn, $args...) {
    @return meta.call($fn, $args);
}

@mixin background-color($variants...) {
    @include variants($variants) using ($v) {
      @each $rv in (400, 500, 600, 700) {
        #{variant($v, red-#{$rv})} {
          background-color: var(--red-#{$rv});
        }
      }
    }
}

@at-root {
    @include background-color(responsive, hover, focus, group-hover, group-focus);
}

output.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .lg\:red-700 {
    background-color: var(--red-700);
  }
}
@media (min-width: 1280px) {
  .xl\:red-400 {
    background-color: var(--red-400);
  }

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

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

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

settings.json

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