Generated by SassMeister.com.

input.scss

@use "sass:string";

@mixin variants($variants...) {
    @each $variant in $variants {
        @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;
                        }
                    }
                }
            }
        }
    }
}

.red {
    @include variants(hover, focus, responsive) {
        background-color: red;
    }
}

output.css

.hover\:red:hover {
  background-color: red;
}

.focus\:red:focus {
  background-color: red;
}

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

settings.json

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