Generated by SassMeister.com.

input.scss

/* Root should be passed for modifiers only */
@mixin hoverable($root: '') {
    @at-root {
        a#{&},
        button#{&},
        label#{&},
        &#{$root}--hoverable {
            @content;
        }
    }
}

.box {
    $root: &;
    content: "block";
    
    @include hoverable {
        content: "block - hoverable";
    }

    &--element {
        content: "element";
        
        @include hoverable($root) {
            content: "element hoverable";
        }
    }

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

output.css

/* Root should be passed for modifiers only */
.box {
  content: "block";
}
a.box,
button.box,
label.box, .box--hoverable {
  content: "block - hoverable";
}

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

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

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

settings.json

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