Generated by SassMeister.com.

input.scss

$mq: (
   'xs': #{'min-width: 480px'},
);

@mixin at-size($size) {
   &\:#{$size} {
       @content;
    }
 }

 @mixin with-queries ($parent: &) {
     $first: true;

     @if ($first == true) {
         @content;
         $first: false;
     }

     @each $key, $value in $mq {
         $name: str-slice(#{$parent}, 2);

         @media ($value) {
             @at-root {
                 .#{$key}\:\:#{$name} { @content; }
             }
         }
     }
 }


@mixin sizes($parent: &) {

}


@mixin xsmall($parent: &) {
  @include at-size('xsmall') { @content; }
}



@mixin button {
    color: red;
    font-size: 18px;
    
    @content
    
}


@mixin hover {
    &:hover {
        @content;
    }
}

.button {
    @include with-queries {
        @include button {
            @include hover {
                color: blue;
            }
        };
        
        @include xsmall {
            @include button {
                @include hover {
                    color: blue;
                }
            }
            
            font-size: 10px;

        }
    }
}

output.css

.button {
  color: red;
  font-size: 18px;
}
.button:hover {
  color: blue;
}
.button\:xsmall {
  color: red;
  font-size: 18px;
  font-size: 10px;
}
.button\:xsmall:hover {
  color: blue;
}
@media (min-width: 480px) {
  .xs\:\:button {
    color: red;
    font-size: 18px;
  }
  .xs\:\:button:hover {
    color: blue;
  }
  .xs\:\:button\:xsmall {
    color: red;
    font-size: 18px;
    font-size: 10px;
  }
  .xs\:\:button\:xsmall:hover {
    color: blue;
  }
}

settings.json

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