Generated by SassMeister.com.

input.scss

@use "sass:list";

@mixin variants($variants) {

    @content(".", "");

    @if list.index($variants, hover) {
        @content(".hover\\:", ":hover");
    }

    @if list.index($variants, "hover") {
        @content(".focus\\:", ":focus");
    }

    @if list.index($variants, "group-hover") {
        @content(".group-hover:hover .group-hover\\:", "");
    }

    @if list.index($variants, "group-focus") {
        @content(".group-focus:focus .group-focus\\:", "");
    }

    @if list.index($variants, "responsive") {
        @each $mk, $mv in (sm: 640, md: 768, lg: 1024, xl: 1280) {
          @media (min-width: #{$mv + px}) {
            @content(".#{$mk}\\:", "");  
          }
        }
    }
    
}

$shade-range: (100, 200, 300, 400, 500, 600, 700, 800, 900);

@mixin colors($variants...) {
    @include variants($variants) using ($ctx, $pseudo) {
      @each $rv in $shade-range {
        #{$ctx}red-#{$rv}#{$pseudo} {
          color: var(--red-#{$rv});
        }
      }
    }
}

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

output.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

settings.json

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