Generated by SassMeister.com.

input.scss

@use "sass:list";

@function v($selector, $v) {
    @if $v == none {
        @return "#{$selector}";
    } @else if $v == hover {
        @return "hover\\:#{$selector}:hover";
    } @else if $v == focus {
        @return "focus\\:#{$selector}:focus";
    }
    @error "v: no such variant: $variant=#{variant}";
}

@mixin variants($variants) {
    @content(none);
    @if list.index($variants, hover) {
        @content(hover);
    }
    @if list.index($variants, focus) {
        @content(focus);
    }
    // @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}) {
    //           @at-root {
    //             @content(".#{$mk}\\:", "");
    //           }
    //       }
    //     }
    // }
}

$shade-range: (400, 500, 600, 700);

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


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

output.css

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

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

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

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

.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);
}

.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);
}

settings.json

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