Generated by SassMeister.com.

input.scss

@use "sass:string";

@mixin responsive {
	@each $key, $n in (sm: 640, md: 768) {
	    /* >= #{$n + px} (#{$key}) */
		@media (min-width: $n + px) {
			.#{$key} {
				@content;
			}
		}
	}
}

@mixin hoverable {
    @at-root {
        .hover\:#{string.slice("" + &, 2)}:hover {
            @content;
        }
        .group-hover:hover & {
            @content;
        }
    }
}

@mixin focusable {
    @at-root {
        .focus\:#{string.slice("" + &, 2)}:focus {
            @content;
        }
        .group-focus:focus & {
            @content;
        }
    }
}

$shorthand: c;
$property: color;
$range: (red-400, red-500);

@each $rv in $range {
    .#{$shorthand}-#{$rv} {
        @include hoverable {
            #{$property}: #{$rv};
        }
    }
}

@each $rv in $range {
    .#{$shorthand}-#{$rv} {
        @include focusable {
            #{$property}: #{$rv};
        }
    }
}

@include responsive {
    @each $rv in $range {
        &\:#{$shorthand}-#{$rv} {
            #{$property}: #{$rv};
        }
    }
}

// $shorthand: bg;
// $property: background-color;
// $map: (
//     red-500: var(--red-500),
//     blue-500: var(--blue-500),
// );
// 
// 
// @each $mk, $mv in $map {
//     .#{$shorthand}-#{$mk} {
//         @include hoverable {
//             #{$property}: #{$mv};
//         }
//     }
// }

output.css

.hover\:c-red-400:hover {
  color: red-400;
}

.group-hover:hover .c-red-400 {
  color: red-400;
}

.hover\:c-red-500:hover {
  color: red-500;
}

.group-hover:hover .c-red-500 {
  color: red-500;
}

.focus\:c-red-400:focus {
  color: red-400;
}

.group-focus:focus .c-red-400 {
  color: red-400;
}

.focus\:c-red-500:focus {
  color: red-500;
}

.group-focus:focus .c-red-500 {
  color: red-500;
}

/* >= 640px (sm) */
@media (min-width: 640px) {
  .sm\:c-red-400 {
    color: red-400;
  }
  .sm\:c-red-500 {
    color: red-500;
  }
}
/* >= 768px (md) */
@media (min-width: 768px) {
  .md\:c-red-400 {
    color: red-400;
  }
  .md\:c-red-500 {
    color: red-500;
  }
}

settings.json

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