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-and-variants($parent: &) {
    @content;

    @include size-lists { @content };    
    @include variant-lists { 
        @content; 
        @include size-lists { @content }
    }
}
 // ----------------------------------------------------------------------------
 

@mixin size-lists($parent: &) {

  @include at-size('xsmall') { 
    @content;
    font-size: 12px;  
  }
  
  @include at-size('small') { 
    @content;
    font-size: 14px;  
  }  
}

@mixin variant-lists($parent: &) {
    &__block {
        @content;
        display: block;        
    }
}
 

// -----------------------------------------------------------------------------

.button {
    @include sizes-and-variants {
        font-size: 16px;   
        display: inline;
        
        &:hover {
            background: #f00;
        }                   
    }     
}

markup.html

<a href="" class="button:xsmall">Hello World</a>

output.css

.button {
  font-size: 16px;
  display: inline;
}
.button:hover {
  background: #f00;
}
.button\:xsmall {
  font-size: 16px;
  display: inline;
  font-size: 12px;
}
.button\:xsmall:hover {
  background: #f00;
}
.button\:small {
  font-size: 16px;
  display: inline;
  font-size: 14px;
}
.button\:small:hover {
  background: #f00;
}
.button__block {
  font-size: 16px;
  display: inline;
  display: block;
}
.button__block:hover {
  background: #f00;
}
.button__block\:xsmall {
  font-size: 16px;
  display: inline;
  font-size: 12px;
}
.button__block\:xsmall:hover {
  background: #f00;
}
.button__block\:small {
  font-size: 16px;
  display: inline;
  font-size: 14px;
}
.button__block\:small:hover {
  background: #f00;
}

settings.json

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