Generated by SassMeister.com.

input.scss

@mixin hoverable($root: '') {
    @at-root {
        a#{&},
        button#{&},
        label#{&},
        &#{$root}--hoverable {
            @content;
        }
    }
}

.box {
    $root: &;

    &--modifier {
        content: "modifier";
        
        @include hoverable($root) {
            content: "moddifie--hoverable";
        }
    }
    
    &.-is-state {
        content: "state";
        
        @include hoverable($root) {
            content: "state--hoverable";
        }
    }
    
    @include hoverable {
        content: "hoverable";
    }
}

output.css

.box--modifier {
  content: "modifier";
}
a.box--modifier,
button.box--modifier,
label.box--modifier, .box--modifier.box--hoverable {
  content: "moddifie--hoverable";
}

.box.-is-state {
  content: "state";
}
a.box.-is-state,
button.box.-is-state,
label.box.-is-state, .box.-is-state.box--hoverable {
  content: "state--hoverable";
}

a.box,
button.box,
label.box, .box--hoverable {
  content: "hoverable";
}

settings.json

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