Generated by SassMeister.com.

input.scss

$media-queries: (
    sm: 40rem,
    lg: 80rem
);

@mixin loop-states {
    &,
    &\:hover:hover,
    &\:active:active,
    &\:focus:focus {
        @content;
    }

    @each $key, $val in $media-queries {
        // Checks that the media query is a number
        @if $val != $val + "" {
            @media (min-width: #{$val}) {
                &\@#{$key},
                &\:hover\@#{$key}:hover,
                &\:active\@#{$key}:active,
                &\:focus\@#{$key}:focus {
                    @content;
                }
            }
        }
    }
}

.this {
    @include loop-states {
        color: red;   
    }
}

output.css

.this, .this\:hover:hover, .this\:active:active, .this\:focus:focus {
  color: red;
}
@media (min-width: 40rem) {
  .this\@sm, .this\:hover\@sm:hover, .this\:active\@sm:active, .this\:focus\@sm:focus {
    color: red;
  }
}
@media (min-width: 80rem) {
  .this\@lg, .this\:hover\@lg:hover, .this\:active\@lg:active, .this\:focus\@lg:focus {
    color: red;
  }
}

settings.json

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